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 相关文章推荐
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
JavaScript基础重点(必看)
Jul 09 Javascript
JavaScript中自带的 reduce()方法使用示例详解
Aug 10 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 Javascript
Angular.JS中指令ng-if的注意事项小结
Jun 21 Javascript
原生js实现仿window10系统日历效果的实例
Oct 31 Javascript
vue iview组件表格 render函数的使用方法详解
Mar 15 Javascript
微信小程序滑动选择器的实现代码
Aug 10 Javascript
微信小程序自定义导航教程(兼容各种手机)
Dec 12 Javascript
js实现开关灯效果
Mar 30 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
无线电广播的开始
2002/01/30 无线电
使用Limit参数优化MySQL查询的方法
2008/11/12 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
深入解析PHP的Yii框架中的event事件机制
2016/03/17 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
js限制文本框只能输入整数或者带小数点的数字
2015/04/27 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
JS控件bootstrap datepicker使用方法详解
2017/03/25 Javascript
Vue axios 中提交表单数据(含上传文件)
2017/07/06 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
详解微信小程序input标签正则初体验
2018/08/18 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
2019/01/28 jQuery
利用layer实现表单完美验证的方法
2019/09/26 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
[02:40]DOTA2英雄基础教程 巨牙海民
2013/12/23 DOTA
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
python使用循环实现批量创建文件夹示例
2014/03/25 Python
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
Python实现JSON反序列化类对象的示例
2018/01/31 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
python列表使用实现名字管理系统
2019/01/30 Python
python的json中方法及jsonpath模块用法分析
2019/12/06 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
python爬取音频下载的示例代码
2020/10/19 Python
关于python3.9安装wordcloud出错的问题及解决办法
2020/11/02 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
德国运动鞋网上商店:Afew Store
2018/01/05 全球购物
运动会四百米广播稿
2014/01/19 职场文书
基本公共卫生服务健康教育工作方案
2014/05/22 职场文书
员工趣味活动方案
2014/08/27 职场文书
体育个人工作总结
2015/02/09 职场文书
Java生成日期时间存入Mysql数据库的实现方法
2022/03/03 Java/Android