jquery-11 如何制作鼠标右键菜单
jquery-11 如何制作鼠标右键菜单
一、总结
一句话总结：核心原理：找到右键菜单事件contextmenu，return false去掉默认事件，然后判断用户是否点的右键，然后在鼠标的位置显示菜单。菜单弄成绝对定位，开始时设置为不显示。
1、右键菜单事件是什么？
contextmenu
40 $(document).contextmenu(function(event){
2、如何阻止默认的右键菜单事件？
在事件中return false可以阻止事件的默认行为
40 $(document).contextmenu(function(event){
41 x=event.clientX;
42 y=event.clientY;
43
44 btn=event.button;
45
46 if(btn==2){
47 $('ul').show().css({'left':x+'px','top':y+'px'});
48 return false;
49 }
50 });
3、如何使用事件发生的event对象？
事件发生会产生一个event对象，将它作为参数传递给匿名函数，即可在匿名函数中操作它
40 $(document).contextmenu(function(event){
41 x=event.clientX;
42 y=event.clientY;
4、如何获取鼠标在屏幕上面的位置？
有一个事件发生，将它的事件对象传递给匿名函数，在匿名函数中调用这个event对象的clientX和clientY即可获取它的鼠标位置
40 $(document).contextmenu(function(event){
41 x=event.clientX;
42 y=event.clientY;
5、如何判断用户是否点右键？
获取event对象的button属性，属性值为2即是鼠标右键，0左键，1滚轮。
44 btn=event.button;
45
46 if(btn==2){
6、如何将元素放在鼠标右键的位置？
先获取鼠标的位置（event对象的clientX和clientY属性），然后设置元素绝对定位，然后设置left和top属性即可
40 $(document).contextmenu(function(event){
41 x=event.clientX;
42 y=event.clientY;
43
44 btn=event.button;
45
46 if(btn==2){
47 $('ul').show().css({'left':x+'px','top':y+'px'});
48 return false;
49 }
50 });
二、如何制作鼠标右键菜单
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>index</title> 6 <style> 7 *{ 8 margin:0px; 9 padding:0px; 10 } 11 12 ul{ 13 width:100px; 14 height:150px; 15 background: #ccc; 16 border-radius:10px; 17 position: absolute; 18 display: none; 19 } 20 21 ul li{ 22 text-align: center; 23 color:#fff; 24 font-weight: bold; 25 line-height: 25px; 26 } 27 </style> 28 <script src="jquery.js"></script> 29 </head> 30 <body> 31 <ul> 32 <li><a href='http://www.yzmedu.com' target='_blank'>云知梦</a></li> 33 <li>第一菜单</li> 34 <li>第一菜单</li> 35 <li>第一菜单</li> 36 <li>第一菜单</li> 37 </ul> 38 </body> 39 <script> 40 $(document).contextmenu(function(event){ 41 x=event.clientX; 42 y=event.clientY; 43 44 btn=event.button; 45 46 if(btn==2){ 47 $('ul').show().css({'left':x+'px','top':y+'px'}); 48 return false; 49 } 50 }); 51 </script> 52 </html>
