js右击事件

先贴代码：

 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>

View Code

注意的两个点是：

①：先取消默认右击事件,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>

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>

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 })();