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.onclick=function () {
//取消右键菜单,设置元素display为none
//。。。。。业务代码
}

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

js自定义鼠标右键菜单的更多相关文章

  1. JS自定义鼠标右击菜单

    自定义鼠标右击菜单要素: 禁止页面默认右击事件 设置右击菜单的样式以及菜单出现的位置(通过捕获鼠标点击位置来确定菜单的位置) 鼠标在指定控件(区域)上右击时显示菜单(默认菜单隐藏,点击鼠标右键时显示) ...

  2. JQuery模拟网页中自定义鼠标右键菜单

    题外话.......最近在开发一个网站项目的时候,需要用到网页自定义右键菜单,在网上看了各路前辈大神的操作,头晕目眩,为了达到目的,突然灵机一动,于是便有了这篇文章. 先放个效果图(沾沾自喜,大神勿喷 ...

  3. JavaScript自定义鼠标右键菜单

    下面为JavaScript代码 window.onload = function () { //好友列表 var f = 0; //判断指定id的元素在页面中是否存在 if (document.get ...

  4. jq自定义鼠标右键菜单

    效果: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  5. Win10 自定义鼠标右键菜单

    1. 点击文件鼠标右键显示软件 1.1 步骤 win+R输入regedit进入注册表 定位到HKEY_CLASSES_ROOT\*\shell下 在shell创建一个你想要的右键文件 例如:Kinok ...

  6. Win7如何自定义鼠标右键菜单 添加用记事本打开

    鼠标右键用记事本打开.reg Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\*\shell\Notepad] @="用记事本 ...

  7. Win7如何自定义鼠标右键菜单 添加新建WORD文档

    鼠标右键添加新建WORD文档.reg Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\.doc] @="Word.Docume ...

  8. Win7如何自定义鼠标右键菜单 添加新建文本文档

    鼠标右键新建文本文档.reg REGEDIT4 [HKEY_CLASSES_ROOT\.txt] @="txtfile" "Content Type"=&quo ...

  9. Win7如何自定义鼠标右键菜单 添加新建EXCEL文档

    鼠标右键添加新建EXCEL文档.reg Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\.xls] "Content Type ...

随机推荐

  1. Java之JDBC连接池

    数据库连接池 连接池的概述 概念:其实就是一个容器(集合),存放数据库连接的容器. 当系统初始化好后,容器被创建,容器中会申请一些连接对象,当用户来访问数据库时, 从容器中获取连接对象,用户访问完之后 ...

  2. NOIP2015D2总结

    今天居然考了一套题.NOIP2015D2. 这是当年的战绩: 360的一等奖线.好强啊! 之前做过2015的D1,但我确实不会做landlord……今天曾祥瑞学长和林可学姐都来了,他们说,朱昶宇AK, ...

  3. Python 爬虫入门(三)—— 寻找合适的爬取策略

    写爬虫之前,首先要明确爬取的数据.然后,思考从哪些地方可以获取这些数据.下面以一个实际案例来说明,怎么寻找一个好的爬虫策略.(代码仅供学习交流,切勿用作商业或其他有害行为) 1).方式一:直接爬取网站 ...

  4. App统计指标定义

    度量(指标) 定义 活跃用户 指启动应用的用户(去重,即1台设备打开多次会被计为1个活跃用户). 是衡量一个应用运营情况最基础的一个指标,用以表示用户规模.通常根据不同的时间限定,有日活跃用户.周活跃 ...

  5. python---基础知识回顾(八)数据库基础操作(sqlite和mysql)

    一:sqlite操作 SQLite是一种嵌入式数据库,它的数据库就是一个文件.由于SQLite本身是C写的,而且体积很小,所以,经常被集成到各种应用程序中,甚至在iOS和Android的App中都可以 ...

  6. 介绍——基于类的视图(class-based view)

    ​刚开始的时候,django只有基于函数的视图(Function-based views).为了解决开发视图中繁杂的重复代码,基于函数的通用视图( Class-based generic views) ...

  7. iview组件 eslint校验出错 Parsing error: x-invalid-end-tag

    如下: 解决: 在.eslintrc.js文件中加上: rules: { // allow async-await 'generator-star-spacing': 'off', // allow ...

  8. bzoj千题计划124:bzoj1036: [ZJOI2008]树的统计Count

    http://www.lydsy.com/JudgeOnline/problem.php?id=1036 树链剖分板子题 #include<cstdio> #include<iost ...

  9. bzoj千题计划112:bzoj1022: [SHOI2008]小约翰的游戏John

    http://www.lydsy.com/JudgeOnline/problem.php?id=1022 http://www.cnblogs.com/TheRoadToTheGold/p/67448 ...

  10. SQL - 查询某一字段值相同而另一字段值最大的记录

    有时需要以某一字段作为分组,筛选每一组的另一字段值最大(或最小)的记录.例如,有如下表 app,存储了 app 的 ID.名称.版本号等信息.现在要筛选出每个 app 版本最大的记录. 方法一 SEL ...