题外话.......最近在开发一个网站项目的时候,需要用到网页自定义右键菜单,在网上看了各路前辈大神的操作,头晕目眩,为了达到目的,突然灵机一动,于是便有了这篇文章. 先放个效果图(沾沾自喜,大神勿喷): 废话不多说,进入正题: 1.首先 我们要禁用掉原网页中右键菜单 复制代码 //JQuery代码 $(selector).on('contextmenu', function () { return false; }) 复制代码 这样目标区域的右键菜单就无法使用了 demo1: 复制代码 1 2 3 4 5 6 7 8 9 10 21 22 25 26 27 28 33 34 35 复制代码 2.接下来开始编写我们自己的菜单弹出窗口 思路:通过捕获鼠标点击时的事件在屏幕上被触发的位置(x,y),然后把我们自己编写的窗口利用CSS中的"定位"显示在哪里. 2.1:如何获取到鼠标在屏幕上点击的事件? JQuery Event.which属性---引用JQuery中文手册中的内容 which属性用于返回触发当前事件时按下的键盘按键或鼠标按钮。 对于键盘和鼠标事件，该属性用于确定你按下的是哪一个键盘按键或鼠标按钮。 which属性对DOM原生的event.keyCode和event.charCode进行了标准化。 适用的事件类型主要有键盘事件：keypress、keydown、keyup，以及鼠标事件：mouseup、mousedown。 该属性属于jQuery的Event对象(实例) $(selector).on('mousedown',function(event){ var code=event.which;//返回值是一个Number类型 }) event.which属性值 对应的鼠标按钮 1 鼠标左键 2 鼠标中键(滚轮键) 3 鼠标右键 复制代码 1 $('#demo1').on('mousedown',function(event){//紧接上面的实例demo1 在script中插入这段代码即可获取到鼠标点击事件 2 var code=event.which;//判断是单机了鼠标哪个键(1,2,3) 3 alert('区域被鼠标点击了---'+code); 4 }) 复制代码 2.2 如何获取事件发生的位置(X,Y)? 引用一位前辈的:链接: https://www.cnblogs.com/king-ying/p/5936429.html event对象中的属性: 复制代码 1 event.offsetX //设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标 2 event.offsetY //设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标 3 event.pageX //设置或获取鼠标指针位置相对于页面左上角的 x 坐标 4 event.pageY //设置或获取鼠标指针位置相对于页面左上角的 y 坐标 5 event.clientX //设置或获取鼠标指针位置相对于浏览器窗口可视区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条 6 event.clientY //设置或获取鼠标指针位置相对于浏览器窗口可视区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条 7 event.screenX //设置或获取获取鼠标指针位置相对于屏幕的 x 坐标 8 event.screenY //设置或获取鼠标指针位置相对于屏幕的 y 坐标 复制代码 复制代码 在上面的demo1的 js 代码中 增添 两句 1 $('#demo1').on('mousedown',function(event){ 2 var code=event.which; 3 var x=event.pageX;//相对于页面左上角X的坐标 4 var y=event.pageY;//相对于页面左上角Y的坐标 5 alert('区域被点击了'+code+"位置:"+'('+x+','+y+')'); 6 }) 复制代码 为了方便观察 重新做了一个demo2(复制粘贴即可运行): 复制代码 1 2 3 4 5 6 7 8 9 10 31 32 33 显示内容 34 35 38 39 40 41 65 66 67 复制代码 核心部分差不多就是上面的内容 3.编写自定义菜单 达到的显示效果: 废话不多上代码: 复制代码 1 2 3 4 5 6 7 8 9 10 73 74 75 显示内容 76 77 80 81 82 92 93 94 95 142 143 144 复制代码 emmmm以上就是今天的内容(也许有点粗糙.第一次写这么长,有问题欢迎评论或者私信)https://www.cnblogs.com/roseAT/p/9955309.html