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 相关文章推荐
ImageFlow可鼠标控制图片滚动
Jan 30 Javascript
js 文件引入实现代码
Apr 23 Javascript
jquery中的过滤操作详细解析
Dec 02 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
May 20 Javascript
浅析JavaScript回调函数应用
May 22 Javascript
Angular2从搭建环境到开发步骤详解
Oct 17 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
Jul 06 Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
Jul 26 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
Apr 29 Javascript
JS倒计时两种实现方式代码实例
Jul 27 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实现图片自动清理的方法
2015/07/08 PHP
PHP之图片上传类实例代码(加了缩略图)
2016/06/30 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
利用PHP如何统计Nginx日志的User Agent数据
2019/03/06 PHP
java解析json方法总结
2019/05/16 PHP
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
Angularjs的$http异步删除数据详解及实例
2017/07/27 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
2018/06/28 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
2020/12/01 Vue.js
python中的全局变量用法分析
2015/06/09 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
波兰电子产品购物网站:Vobis
2019/05/26 全球购物
美国排名第一的泳池用品直接来源:In The Swim
2019/09/23 全球购物
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
迟到检讨书大全
2014/01/25 职场文书
《木笛》教学反思
2014/03/01 职场文书
计算机毕业生自荐信范文
2014/03/23 职场文书
工作总结与自我评价
2014/09/18 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
岗位聘任报告
2015/03/02 职场文书
部门2015年度工作总结
2015/04/29 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书
导游词之泰山玉皇顶
2019/12/23 职场文书
Nginx反向代理及负载均衡如何实现(基于linux)
2021/03/31 Servers
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python