js自定义鼠标右键菜单

document.oncontextmenu = function(e) {
    return false;
}
document.onmousedown = function(e) {

    switch(e.button) {
        case 0:
            console.log("鼠标左键")
        break;
    case 1:
        console.log("鼠标中间");
        break;
    case 2:
        console.log("鼠标右键");
            break;
        default:
            break;
    }
}

废话不多说上代码,核心知识是mousedown事件中的event对象中隐含了一个button属性,这个属性包含了3个值(IE浏览器有自己的一套实现机制,详情见下图,引用自W3School):

由于浏览器默认有鼠标右键菜单,比如说查看网页源代码,复制,刷新,审查元素等快捷操作。有时候我们并不想使用系统默认的功能,这时候我们可以阻止系统的contextmenu事件就OK了,然后在鼠标右键点击的时候,自己模拟一个菜单(比如说用div包裹一个ui列表);

当我们点击任何一个地方,右键菜单都应该消失才对,所以我们吧事件委托到document对象上。

document.οnclick=function () {
    //取消右键菜单,设置元素display为none
    //。。。。。业务代码
}

代码只有世纪行,是不是很简单呢?赶快动手做一个属于你自己的右键菜单吧!

转载于:https://www.cnblogs.com/zt123123/p/7831039.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值