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的变量作用域深入理解
Oct 25 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
Sep 04 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
Jun 09 Javascript
jQuery实现鼠标选文字发新浪微博的方法
Apr 02 Javascript
javascript 用函数实现继承详解
May 28 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
Jan 20 Javascript
利用vscode编写vue的简单配置详解
Jun 17 Javascript
Vue+Element使用富文本编辑器的示例代码
Aug 14 Javascript
在Js页面通过POST传递参数跳转到新页面详解
Aug 25 Javascript
JavaScript 自定义事件之我见
Sep 25 Javascript
CryptoJS中AES实现前后端通用加解密技术
Dec 18 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
Mar 16 Javascript
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中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
PHP新特性之字节码缓存和内置服务器
2017/08/11 PHP
javascript 窗口加载蒙板 内嵌网页内容
2010/11/19 Javascript
JavaScript中“基本类型”之争小结
2013/01/03 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
2013/06/12 Javascript
js简单实现Select互换数据的方法
2015/08/17 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
2015/09/25 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
2016/01/08 Javascript
js实现无缝滚动图
2017/02/22 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
详解Angular Reactive Form 表单验证
2017/07/06 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
简单实现js拖拽效果
2017/07/25 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
vue-自定义组件传值的实例讲解
2018/09/18 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
2019/08/22 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
2019/11/10 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
javascript canvas检测小球碰撞
2020/04/17 Javascript
Python3多线程操作简单示例
2018/05/22 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
Pytorch - TORCH.NN.INIT 参数初始化的操作
2021/02/27 Python
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
PHP如何自定义函数
2016/09/16 面试题
经典商业广告词
2014/03/13 职场文书
有创意的广告词
2014/03/18 职场文书
诉讼财产保全担保书
2014/05/20 职场文书
公司应聘自荐书
2014/06/14 职场文书
公司年会开场白
2015/06/01 职场文书
社区服务理念口号
2015/12/25 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
详解NodeJS模块化
2021/06/15 NodeJs
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers