先贴代码：
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=" 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 })();