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动态设置样式实现代码及演示动画
Jan 25 Javascript
js判断url是否有效的两种方法
Mar 04 Javascript
JavaScript把数组作为堆栈使用的方法
Mar 20 Javascript
深入剖析JavaScript:Object类型
May 10 Javascript
sso跨域写cookie的一段js脚本(推荐)
May 25 Javascript
浅谈JavaScript对象与继承
Jul 10 Javascript
js数组与字符串常用方法总结
Jan 13 Javascript
创建一般js对象的几种方式
Jan 19 Javascript
js实现延迟加载的几种方法
Apr 24 Javascript
js 倒计时(高效率服务器时间同步)
Sep 12 Javascript
html中通过JS获取JSON数据并加载的方法
Nov 30 Javascript
图解JS原型和原型链实现原理
Sep 15 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
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
WIN98下Apache1.3.14+PHP4.0.4的安装
2006/10/09 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
php多线程并发实现方法
2016/09/30 PHP
php正则表达式使用方法整理集合
2020/01/31 PHP
JavaScript的类型简单说明
2010/09/03 Javascript
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
Jquery上传插件 uploadify v3.1使用说明
2012/06/18 Javascript
javascript将数组插入到另一个数组中的代码
2013/01/10 Javascript
jQuery中delegate和on的用法与区别详细解析
2014/01/26 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
javascript数组输出的两种方式
2015/01/13 Javascript
javascript正则表达式基础知识入门
2015/04/20 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
2015/11/26 Javascript
深入理解JavaScript中的并行处理
2016/09/22 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
2019/04/17 Javascript
node静态服务器实现静态读取文件或文件夹
2019/12/03 Javascript
[07:12]2014DOTA2西雅图国际邀请赛 黑马Liquid专题采访
2014/07/12 DOTA
Python实现全局变量的两个解决方法
2014/07/03 Python
Python多层嵌套list的递归处理方法(推荐)
2016/06/08 Python
简单了解Django模板的使用
2017/12/20 Python
selenium+python设置爬虫代理IP的方法
2018/11/29 Python
Python3.8中使用f-strings调试
2019/05/22 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
Pytorch提取模型特征向量保存至csv的例子
2020/01/03 Python
对python中list的五种查找方法说明
2020/07/13 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
中级会计职业生涯规划书
2014/03/01 职场文书
环保建议书作文300字
2015/09/14 职场文书
2016年社区创先争优活动总结
2016/04/05 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书