博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js 模拟右键菜单
阅读量:5069 次
发布时间:2019-06-12

本文共 2597 字,大约阅读时间需要 8 分钟。

 
不经意地被一位同事问起在javascript里面如何检测右键事件,并且屏蔽原来的右键菜单,上网查找一翻之后发现一些比较简单的方法。如设置onmousedown,检查其event.button的值是不是2(代表右键)。这个方法在FF和IE中都可用,但是在Maxthon(遨游)中event.button却是0,这让我有点困惑,Maxthon不是IE内核的吗?我只能设想Maxthon这个壳是做过手脚的。然而如果设置onmouseup,其event.button值就是2了。所以如果检测右键的话,是设置其onmouseup即可。
document.getElementById("test").οnmοuseup=function(oEvent) {    if (!oEvent) oEvent=window.event;    if (oEvent.button==2) {        //-- do something for user right click        // alert("Mouse up");    }}
但是如果还需要屏蔽右键的话,还是用oncontextmenu比较简单,但这时就不是检测右键,而是检测是否弹出上下文菜单。屏蔽的方法跟屏蔽其他默认行为的方法是一样的,一般来说都是有效的,不过因为某些浏览器有禁止禁止弹出右键菜单的功能,所以如果需要在用户点击右键时做点事情,最好还是不要放在oncontextmenu中,而是放在onmouseup中并检测右键,附加oncontextmenu来屏蔽原来的菜单。
document.getElementById("test").οncοntextmenu=function(event) {    //-- do something here    // alert("ContextMenu Popup");    //-- prevent the default behavior    if (document.all) {        window.event.returnValue = false;}// for IE    else {        event.preventDefault();}    };
阻止右键菜单是否可以直接简单的return false??
通过一些简单的测试,可以发现在FF和在IE存在着有趣的区别。
在onmouseup和oncontextmenu事件处理中都使用alert,可以看出来是先执行onmouseup事件再到oncontextmenu的,在IE中,两者会非常连贯的在一起执行,(均认为是发生在test元素上的事件),而在FF里面则不是(前提是test元素所占区域比较小,当alert弹出时需要移动鼠标才能点击'OK'的情况下),它会先执行onmouseup,alert出来之后,移动鼠标点击'OK',这时还是会弹出菜单的,但是如果不移开鼠标,而是直接按Enter确认的话,这时它就会认为是在test元素上触发的事件了。可以理解为是IE 和 Firefox中的事件机制的细节区别。当然我们很少会应用到连续事件的,就无须注意到这点区别了,把需要的事件处理完整的写在一个处理方法里面就是最简单有效的解决方案了。

蓝色理想上的一个例子:

自定义多级右键菜单
自定义右键菜单,请在页面点击右键查看效果。
  • JavaScript 学习
  • 第一课
    • 网页特效原理分析
    • 响应用户操作
    • 提示框效果
    • 事件驱动
    • 元素属性操作
  • 第二课
    • 改变网页背景颜色
    • 函数传参
    • 高重用性函数的编写
    • 126邮箱全选效果
    • 循环及遍历操作
  • 第三课
    • JavaScript组成
      • ECMAScript
      • DOM
      • BOM
      • JavaScript兼容性来源
    • JavaScript出现的位置、优缺点
    • 变量、类型、typeof、数据类型转换、变量作用域
    • 闭包
      • 什么是闭包
      • 简单应用
      • 闭包缺点
    • 运算符
    • 程序流程控制
    • 定时器的使用
      • setInterval
      • setTimeout

转载于:https://www.cnblogs.com/hdchangchang/p/3965357.html

你可能感兴趣的文章
Spring MVC 入门(二)
查看>>
Java处理多人同时读写文件的文件锁处理
查看>>
格式化输出数字和时间
查看>>
页面中公用的全选按钮,单选按钮组件的编写
查看>>
判断文本框输入的文字长度
查看>>
java笔记--用ThreadLocal管理线程,Callable<V>接口实现有返回值的线程
查看>>
Scaling Pinterest - From 0 To 10s Of Billions Of Page Views A Month In Two Years
查看>>
SelectSort 选择排序
查看>>
关于android 加载https网页的问题
查看>>
BZOJ 1047 HAOI2007 理想的正方形 单调队列
查看>>
各种语言推断是否是手机设备
查看>>
这个看起来有点简单!--------实验吧
查看>>
小知识:js如何更改css样式
查看>>
PHP count down
查看>>
JVM参数调优:Eclipse启动实践
查看>>
(旧笔记搬家)struts.xml中单独页面跳转的配置
查看>>
不定期周末福利:数据结构与算法学习书单
查看>>
strlen函数
查看>>
Java中的String,StringBuilder,StringBuffer三者的区别
查看>>
Python爬虫
查看>>