js右击事件

先贴代码：

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script type="text/javascript">

         window.onload = function(){

             //去掉默认的contextmenu事件，否则会和右键事件同时出现。

             document.oncontextmenu = function(e){

                 e.preventDefault();

             };

             document.getElementById("test").onmousedown = function(e){

                 if(e.button ==2){

                     alert("你点了右键");

                 }else if(e.button ==0){

                     alert("你点了左键");

                 }else if(e.button ==1){

                     alert("你点了滚轮");

                 }

             }

         }

     </script>

 </head>

 <body>

 <div style="width: 400px;height:400px;margin:auto;border:1px solid pink" id="test"></div>

 </body>

 </html>

注意的两个点是：

①：先取消默认右击事件,event.preventDefault();

②：判断event.Button:0:左键，1：滚轮，2：右键。

值得一说的的是"oncontextmenu"是指右键按下时的作用。

再给一个应用吧：

右击div显示出自己定义的菜单，点击除了div的地方，是默认的右击事件。

代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         body{

             margin: 0;

         }

         #menu{

             width: 100px;

             height: 100px;

             background-color: aquamarine;

             text-align: center;

             position: absolute;

             left: 0;

             top:0;

             display: none;

         }

         #div{

             width: 400px;

             height: 400px;

             background-color: red;;

         }

     </style>

 </head>

 <body>

 <div id="menu">

     <p id="p">lalala</p>

 </div>

 <div id="div"></div>

 <script src="main.js"></script>

 </body>

 </html>

html

 /**

  * Created by Administrator on 2016/8/12.

  */

 (function () {

     var menu = document.querySelector("#menu");

     var div = document.querySelector("#div");

     var p=document.querySelector("#p");

     div.addEventListener("contextmenu", function (event) {

         event.preventDefault();

         menu.style.display = "block";

         menu.style.left = event.pageX + "px";

         menu.style.top = event.pageY + "px";

         p.addEventListener("click",function () {

            alert("a");

         });

     });

     document.addEventListener("contextmenu", function (event) {

         if (event.pageX > 400 || event.pageY > 400) {

             menu.style.display = "none";

         }

     });

 })();

效果自行查看吧，其实也没啥。

原理是，右键的菜单其实是一个隐藏的div,当点击父类div的时候，它出现而已。（貌似这样一说显得这个程序好垃圾啊，╮(╯▽╰)╭其实这也是大厦的一块砖，少了它，大厦会塌的）

再给了类似的应用吧,一个点击div消失的效果。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>点击消失</title>

     <style>

         #m{

             width: 300px;

             height: 300px;

         }

         #div{

             width: 100%;

             height:100%;

             background-color: red;

         }

     </style>

 </head>

 <body>

 <div id="m">

     <div id="div"></div>

 </div>

 <script src="main.js"></script>

 </body>

 </html>

html

 /**

  * Created by Administrator on 2016/8/8.

  */

 (function () {

     var width = 100;

     var height = 100;

     var opacity = 1;

     var div = document.getElementById("div");

     var time;

     function clickToNone() {

         // width-=20;

         width -= 10;

         height -= 10;

         opacity -= 0.1;

         div.style.width = width + "%";

         div.style.height = height + "%";

         div.style.opacity = opacity;

         if (width == 0) {

             div.style.display = "none";

             clearInterval(time);

             // div.style.opacity=0;

         }

     }

     function clickTo() {

         time = setInterval(clickToNone, 300);

     }

     div.addEventListener("click", clickTo);

 })();

巴特西

js右击事件

最新文章

热门文章