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 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 })();
js
效果自行查看吧，其實也沒啥。
原理是，右鍵的菜單其實是一個隱藏的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 })();
js
總結
- 上一篇： 银河系中心 超级黑洞附近：恒星一颗颗地神
- 下一篇： 电脑光驱无法读取光盘怎么办(花前墨233