JQuery如何模拟实现网页中自定义鼠标右键菜单功能

这篇文章给大家分享的是有关JQuery如何模拟实现网页中自定义鼠标右键菜单功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

十年的利川网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。营销型网站建设的优势是能够根据用户设备显示端的尺寸不同,自动调整利川建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联从事“利川网站设计”,“利川网站推广”以来,每个客户项目都认真落实执行。

先放个效果图(沾沾自喜,大神勿喷):

JQuery如何模拟实现网页中自定义鼠标右键菜单功能

1.首先 我们要禁用掉原网页中右键菜单

//JQuery代码
$(selector).on('contextmenu', function () {
     return false;
})

这样目标区域的右键菜单就无法使用了

demo1:





 
 
 
 
 
 


此区域(带颜色)被禁用了右键菜单

   

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鼠标右键
 $('#demo1').on('mousedown',function(event){//紧接上面的实例demo1 在script中插入这段代码即可获取到鼠标点击事件
 var code=event.which;//判断是单机了鼠标哪个键(1,2,3)
 alert('区域被鼠标点击了---'+code);
 })

2.2 如何获取事件发生的位置(X,Y)?

引用一位前辈的:event对象中的属性:

event.offsetX //设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标
event.offsetY //设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标
event.pageX //设置或获取鼠标指针位置相对于页面左上角的 x 坐标
event.pageY //设置或获取鼠标指针位置相对于页面左上角的 y 坐标
event.clientX //设置或获取鼠标指针位置相对于浏览器窗口可视区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条
event.clientY //设置或获取鼠标指针位置相对于浏览器窗口可视区域的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条
event.screenX //设置或获取获取鼠标指针位置相对于屏幕的 x 坐标
event.screenY //设置或获取鼠标指针位置相对于屏幕的 y 坐标
在上面的demo1的 js 代码中 增添 两句1 $('#demo1').on('mousedown',function(event){
   var code=event.which;
   var x=event.pageX;//相对于页面左上角X的坐标
   var y=event.pageY;//相对于页面左上角Y的坐标
   alert('区域被点击了'+code+"位置:"+'('+x+','+y+')');
})

为了方便观察 重新做了一个demo2(复制粘贴即可运行):





 
 
 
 
 
 


显示内容


此区域(带颜色)被禁用了右键菜单

   

核心部分差不多就是上面的内容

3.编写自定义菜单

达到的显示效果:

JQuery如何模拟实现网页中自定义鼠标右键菜单功能

废话不多上代码:





 
 
 
 
 
 


 显示内容


 

在此区域启用自定义菜单,原菜单已禁用

    
  • 选项卡1
  •   
  • 选项卡2
  •   
  • 选项卡3
  •   
  • 选项卡4
  •   
  • 选项卡5
  •   
  • 选项卡6
  •      

    感谢各位的阅读!关于“JQuery如何模拟实现网页中自定义鼠标右键菜单功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


    新闻标题:JQuery如何模拟实现网页中自定义鼠标右键菜单功能
    网站URL:http://bzwzjz.com/article/pcgcph.html