先貼代碼：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 window.onload = function(){ 8 //去掉默認的contextmenu事件，否則會和右鍵事件同時出現。 9 document.oncontextmenu = function(e){ 10 e.preventDefault(); 11 }; 12 document.getElementById("test").onmousedown = function(e){ 13 if(e.button ==2){ 14 alert("你點了右鍵"); 15 }else if(e.button ==0){ 16 alert("你點了左鍵"); 17 }else if(e.button ==1){ 18 alert("你點了滾輪"); 19 } 20 } 21 } 22 </script> 23 </head> 24 <body> 25 26 <div style="width: 400px;height:400px;margin:auto;border:1px solid pink" id="test"></div> 27 </body> 28 </html>
注意的兩個點是：
①：先取消默認右擊事件,event.preventDefault();
②：判斷event.Button:0:左鍵，1：滾輪，2：右鍵。
值得一說的的是"oncontextmenu"是指右鍵按下時的作用。
再給一個應用吧：
右擊div顯示出自己定義的菜單，點擊除了div的地方，是默認的右擊事件。
代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body{ 8 margin: 0; 9 } 10 #menu{ 11 width: 100px; 12 height: 100px; 13 background-color: aquamarine; 14 text-align: center; 15 position: absolute; 16 left: 0; 17 top:0; 18 display: none; 19 } 20 #div{ 21 width: 400px; 22 height: 400px; 23 background-color: red;; 24 } 25 </style> 26 </head> 27 <body> 28 <div id="menu"> 29 <p id="p">lalala</p> 30 </div> 31 <div id="div"></div> 32 <script src="main.js"></script> 33 </body> 34 </html>
1 /** 2 * Created by Administrator on 2016/8/12. 3 */ 4 (function () { 5 6 var menu = document.querySelector("#menu"); 7 var div = document.querySelector("#div"); 8 var p=document.querySelector("#p"); 9 div.addEventListener("contextmenu", function (event) { 10 event.preventDefault(); 11 menu.style.display = "block"; 12 menu.style.left = event.pageX + "px"; 13 menu.style.top = event.pageY + "px"; 14 p.addEventListener("click",function () { 15 alert("a"); 16 }); 17 }); 18 document.addEventListener("contextmenu", function (event) { 19 if (event.pageX > 400 || event.pageY > 400) { 20 menu.style.display = "none"; 21 } 22 }); 23 })();
效果自行查看吧，其實也沒啥。
原理是，右鍵的菜單其實是一個隱藏的div,當點擊父類div的時候，它出現而已。（貌似這樣一說顯得這個程序好垃圾啊，╮(╯▽╰)╭其實這也是大廈的一塊磚，少了它，大廈會塌的）
再給了類似的應用吧,一個點擊div消失的效果。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>點擊消失</title> 6 <style> 7 #m{ 8 width: 300px; 9 height: 300px; 10 } 11 #div{ 12 width: 100%; 13 height:100%; 14 background-color: red; 15 } 16 </style> 17 </head> 18 <body> 19 <div id="m"> 20 21 <div id="div"></div> 22 </div> 23 <script src="main.js"></script> 24 </body> 25 </html>
1 /** 2 * Created by Administrator on 2016/8/8. 3 */ 4 (function () { 5 6 var width = 100; 7 var height = 100; 8 var opacity = 1; 9 var div = document.getElementById("div"); 10 var time; 11 12 function clickToNone() { 13 // width-=20; 14 width -= 10; 15 height -= 10; 16 opacity -= 0.1; 17 div.style.width = width + "%"; 18 div.style.height = height + "%"; 19 div.style.opacity = opacity; 20 if (width == 0) { 21 div.style.display = "none"; 22 clearInterval(time); 23 // div.style.opacity=0; 24 } 25 } 26 27 function clickTo() { 28 time = setInterval(clickToNone, 300); 29 } 30 31 div.addEventListener("click", clickTo); 32 33 })();