javascript实现在某个元素上阻止鼠标右键事件的方法和实例


Posted in Javascript onAugust 12, 2014

最近在做一个小东西的时候需要在某一个元素上“右击”触发一个自定义菜单,通过自定义的菜单对右击的条目进行编辑。这就要求屏蔽默认的右键菜单

IE和FF下面的元素都有oncontextmenu这个方法,在FF下面只要通过event.preventDefault()方法就可以轻松实现这个效果。IE并不支持这个方法,在IE下面一般是通过触发方法后return false来实现阻止默认事件的。

通常我们使用阻止右键事件是在全局阻止,即在document层面就将右键拦截,现在我想要实现的效果是只在特定的区域阻止默认的右键事件,而其他区域并不影响。

通过实验我发现要是在IE下绑定的方法中return false后在document层面上可以实现阻止右键的默认行为。但是具体到某一个元素比如div,则失效。

最后通过查找手册发现,IE下的event对象有一个returnValue属性,如果将这个属性设置为false则不会触发默认的右键事件。类似如下:

event.returnValue = false;

只要加入这句就实现了我想要的效果。完整Demo代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>在某个元素上阻止鼠标右键默认事件DEMO</title>
<style>
body{font-size:12px; line-height:24px; font-family:Arial, Helvetica, sans-serif;}
#activeArea{width:300px;height:200px; background:#06C; color:#fff;}
#cstCM{ width:120px; background:#eee; border:1px solid #ccc; position:absolute; }
#cstCM ul{margin:0; padding:0;}
#cstCM ul li{ list-style:none;padding:0 10px; cursor:default;}
#cstCM ul li:hover{ background:#009; color:#fff;}
.splitTop{ border-bottom:1px solid #ccc;}
.splitBottom{border-top:1px solid #fff;}
</style>
<script>
function customContextMenu(event){
	event.preventDefault ? event.preventDefault():(event.returnValue = false);
	var cstCM = document.getElementById('cstCM');
	cstCM.style.left = event.clientX + 'px';
	cstCM.style.top = event.clientY + 'px';
	cstCM.style.display = 'block';
	document.onmousedown = clearCustomCM;
}
function clearCustomCM(){
	document.getElementById('cstCM').style.display = 'none';
	document.onmousedown = null;
}
</script>
</head>

<body>
<div id="cstCM" style="display:none;">
	<ul>
		<li>View</li>
		<li>Sort By</li>
		<li class="splitTop">Refresh</li>
		<li class="splitBottom">Paste</li>
		<li class="splitTop">Paste Shortcut</li>
		<li class="splitBottom">Property</li>
	</ul>
</div>
<div id="activeArea" oncontextmenu = "customContextMenu(event)">
	Custom Context Menu Area
</div>
</body>
</html>

这个效果兼容IE6+,FF,但是opera压根就没有oncontextmenu这个方法所以也就不能简单的通过这个方法实现,要想实现还需要通过其他的手段。

Javascript 相关文章推荐
JavaScript 学习笔记(四)
Dec 31 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
Jun 09 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
Jul 02 Javascript
jquery实现键盘左右翻页特效
Apr 30 Javascript
jQueryUI DatePicker 添加时分秒
Jun 04 Javascript
jQuery的Read()方法代替原生JS详解
Nov 08 Javascript
js实现Tab选项卡切换效果
Jul 17 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
Vue父组件如何获取子组件中的变量
Jul 24 Javascript
vue移动端的左右滑动事件详解
Jun 17 Javascript
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
Vue监视数据的原理详解
Feb 24 Vue.js
JavaScript弹出窗口方法汇总
Aug 12 #Javascript
Javascript中3种实现继承的方法和代码实例
Aug 12 #Javascript
jQuery判断checkbox是否选中的3种方法
Aug 12 #Javascript
jquery判断浏览器后退时候弹出消息的方法
Aug 11 #Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 #Javascript
JavaScript中跨域调用Flash的方法
Aug 11 #Javascript
jQuery实现的一个自定义Placeholder属性插件
Aug 11 #Javascript
You might like
PHP的explode和implode的使用说明
2011/07/17 PHP
yii2带搜索功能的下拉框实例详解
2016/05/12 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
js 中 document.createEvent的用法
2010/08/29 Javascript
jquery基础教程之deferred对象使用方法
2014/01/22 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
javascript实现时间格式输出FormatDate函数
2015/01/13 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
JS打印组合功能
2016/08/04 Javascript
jQuery插件ajaxFileUpload使用实例解析
2016/10/19 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
2017/08/16 jQuery
JS实现页面数据懒加载
2020/02/13 Javascript
python 图片验证码代码分享
2012/07/04 Python
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
在Python中使用dict和set方法的教程
2015/04/27 Python
python使用socket向客户端发送数据的方法
2015/04/29 Python
python select.select模块通信全过程解析
2017/09/20 Python
Python实现将Excel转换成为image的方法
2018/10/23 Python
Python中的heapq模块源码详析
2019/01/08 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
python3反转字符串的3种方法(小结)
2019/11/07 Python
python的faker库用法
2019/11/28 Python
TensorFlow dataset.shuffle、batch、repeat的使用详解
2020/01/21 Python
Window版下在Jupyter中编写TensorFlow的环境搭建
2020/04/10 Python
某公司的.net工程师面试题笔试题
2013/11/22 面试题
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
2014新年寄语
2014/01/20 职场文书
新颖的化妆品活动方案
2014/08/21 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
行风评议整改报告
2014/11/06 职场文书
2014年大学生工作总结
2014/11/20 职场文书
2015年党员自我剖析材料
2014/12/17 职场文书
天坛导游词
2015/02/02 职场文书
2016学校先进党组织事迹材料
2016/02/29 职场文书
Python进度条的使用
2021/05/17 Python
星际争霸 Light vs Action 一场把教主看到鬼畜的比赛
2022/04/01 星际争霸