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>

转载于:https://www.cnblogs.com/Renyi-Fan/p/9242435.html

jquery-11 如何制作鼠标右键菜单相关推荐

基于jQuery的鼠标右键菜单
对于自制的鼠标右键功能,我们应该考虑哪些因素呢? 一.涉及因素 1.阻止默认鼠标右键事件. 3.右键事件,使菜单出现. 2.考虑右键菜单出现的位置,是否超出窗口. 4.点击窗口任意位置,菜单消失. 二 ...
将Win 11鼠标右键菜单改成Win10样式（修改注册表）
将Win 11鼠标右键菜单改成Win10样式(修改注册表) win+R 运行"regedit",打开注册表编辑器找到"HKEY_CURRENT_USER\SOFTWAR ...
openlayer右键菜单_使用OpenLayers3 添加地图鼠标右键菜单
添加右键菜单,首先我们要监听鼠标右键点击的操作,我们知道鼠标右键事件名是 contextmenu,当鼠标在 html 元素之上,点击鼠标右键,便会触发 contextmenu 事件,在 context ...
Silverlight 4.0添加鼠标右键菜单和Silverlight全屏模式的进入退出
说明:本文出处:http://www.cnblogs.com/chengxingliang/archive/2011/02/14/1954399.html#2627673(非常感谢) 在实际应用中,我 ...
安装ATi显卡驱动后增加的鼠标右键菜单的清理
一般最直接的方法是: 一般位于注册表的: 删除注册表HKEY_CLASSES_ROOT\Directory \Background\shellex\ContextMenuHandlers\ACE下 a ...
自定义html页面鼠标右键,javascript鼠标右键菜单自定义效果
本文实例讲解了javascript鼠标右键菜单的实现方法,分享给大家供大家参考,具体内容如下效果图: 具体代码: #menu{ border:solid 1px gray; width:100px; ...
html 元素允许右键,JavaScript 自定义html元素鼠标右键菜单功能
自定义html元素鼠标右键菜单实现思路在触发contextmenu事件时,取消默认行为(也就是阻止浏览器显示自带的菜单),获取右键事件对象,来确定鼠标的点击位置,作为显示菜单的left和top值 ...
WinForm -- 为TextBox文本框添加鼠标右键菜单
WinForm -- 为TextBox文本框添加鼠标右键菜单 1. 新建一个WinForm项目,放置一个TextBox控件 2. 从工具箱拖进来一个ContextMenuStrip 3. 将TextB ...
Leaflet中使用Leaflet.contextmenu插件实现地图上添加鼠标右键菜单
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的基础上,怎样使用Leaflet.co ...

jquery-11 如何制作鼠标右键菜单

jquery-11 如何制作鼠标右键菜单

一、总结

一句话总结：核心原理：找到右键菜单事件contextmenu，return false去掉默认事件，然后判断用户是否点的右键，然后在鼠标的位置显示菜单。菜单弄成绝对定位，开始时设置为不显示。

1、右键菜单事件是什么？

2、如何阻止默认的右键菜单事件？

3、如何使用事件发生的event对象？

4、如何获取鼠标在屏幕上面的位置？

5、如何判断用户是否点右键？

6、如何将元素放在鼠标右键的位置？

二、如何制作鼠标右键菜单

jquery-11 如何制作鼠标右键菜单相关推荐

最新文章

热门文章