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 相关文章推荐
toggle一个div显示或隐藏且可扩展成自定义下拉框
Sep 12 Javascript
jquery 中的each()跳出循环的语句
May 23 Javascript
JS+DIV实现鼠标划过切换层效果的方法
May 25 Javascript
详解Angularjs中的依赖注入
Mar 11 Javascript
web前端开发upload上传头像js示例代码
Oct 22 Javascript
Javascript中for循环语句的几种写法总结对比
Jan 23 Javascript
vue中如何实现变量和字符串拼接
Jun 19 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
Sep 04 Javascript
angularjs路由传值$routeParams详解
Sep 05 Javascript
微信小程序实现topBar底部选择栏效果
Jul 20 Javascript
JavaScript剩余操作符Rest Operator详解
Jul 20 Javascript
Vue.js watch监视属性知识点总结
Nov 11 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 常用类整理
2009/12/23 PHP
Laravel 中获取上一篇和下一篇数据
2015/07/27 PHP
PHP程序中的文件锁、互斥锁、读写锁使用技巧解析
2016/03/21 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
php+mysql+ajax实现单表多字段多关键词查询的方法
2017/04/15 PHP
dreamweaver 安装Jquery智能提示
2011/04/02 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
2011/12/29 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
jquery实现submit提交表单
2015/02/03 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
基于jQuery实现返回顶部实例代码
2016/01/01 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
vue-quill-editor实现图片上传功能
2017/08/08 Javascript
JS中Swiper的使用和轮播图效果
2017/08/11 Javascript
微信小程序实现点赞、取消点赞功能
2018/11/02 Javascript
javascript 使用sleep函数的常见方法详解
2020/04/26 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
[01:14]3.19DOTA2发布会 三代刀塔人第二代
2014/03/25 DOTA
Python装饰器实现几类验证功能做法实例
2017/05/18 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
Python实现结构体代码实例
2020/02/10 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
惠普美国官方商店:HP Official Store
2016/08/28 全球购物
迪奥美国官网:Dior美国
2019/12/07 全球购物
ORLY官网:美国专业美甲一线品牌
2019/12/11 全球购物
甜品蛋糕店创业计划书
2014/09/21 职场文书
工厂门卫岗位职责
2015/04/13 职场文书
十七岁的单车观后感
2015/06/12 职场文书
Python中常见的反爬机制及其破解方法总结
2021/06/10 Python
gateway网关接口请求的校验方式
2021/07/15 Java/Android
python基础之函数的定义和调用
2021/10/24 Python
Nginx 安装SSL证书完成HTTPS部署
2022/04/28 Servers
教你使用Ubuntu搭建DNS服务器
2022/09/23 Servers