javascript实现在某个元素上阻止鼠标右键事件的方法和实例

 更新时间:2014年08月12日 11:08:35   投稿:junjie  
这篇文章主要介绍了javascript实现在某个元素上阻止鼠标右键事件的方法和实例,需要的朋友可以参考下

最近在做一个小东西的时候需要在某一个元素上“右击”触发一个自定义菜单,通过自定义的菜单对右击的条目进行编辑。这就要求屏蔽默认的右键菜单

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这个方法所以也就不能简单的通过这个方法实现,要想实现还需要通过其他的手段。

相关文章

  • 微信小程序实现通过js操作wxml的wxss属性示例

    微信小程序实现通过js操作wxml的wxss属性示例

    这篇文章主要介绍了微信小程序实现通过js操作wxml的wxss属性,结合实例形式分析了微信小程序使用js操作wxml的wxss属性相关原理、实现技巧与操作注意事项,需要的朋友可以参考下
    2018-12-12
  • 理解javascript async的用法

    理解javascript async的用法

    本篇文章主要介绍了理解javascript async的用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • JavaScript实现刷新不重记的倒计时

    JavaScript实现刷新不重记的倒计时

    网上关于JavaScript实现倒计时的文章有很多,但是一般都是刷新后会重新开始计时,可是我们有的时候会需要刷新却不重新计算的倒计时,这该怎么做呢?下面我们一起来看看这种倒计时怎么实现吧。
    2016-08-08
  • 简单实现js拖拽效果

    简单实现js拖拽效果

    这篇文章主要教大家如何简单实现js拖拽效果,很详细的js拖拽效果实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • JS判断是否360安全浏览器极速内核的方法

    JS判断是否360安全浏览器极速内核的方法

    这篇文章主要介绍了JS判断是否360安全浏览器极速内核的方法,对比分析了360安全浏览器极速内核与其他主流浏览器内核的区别及对应的判断技巧,需要的朋友可以参考下
    2015-01-01
  • JS中from 表单序列化提交的代码

    JS中from 表单序列化提交的代码

    这篇文章主要介绍了javascript中from 表单序列化提交的实现方法,代码简单易懂,非常不错,需要的朋友参考下吧
    2017-01-01
  • 面包屑导航详解

    面包屑导航详解

    本篇文章我们从面包屑导航的样式,面包屑导航的代码等方面详细给大家分析了它的作用和设计技巧,如果你有这方便的需要,学习参考下吧。
    2017-12-12
  • 基于javascript实现碰撞检测

    基于javascript实现碰撞检测

    这篇文章主要为大家详细介绍了基于javascript实现碰撞检测,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • setInterval和setTimeout停止的方法

    setInterval和setTimeout停止的方法

    要想知道它们是怎么停止的,首先我们要了解它们的运行机制和原理,下面是具体的介绍。
    2011-01-01
  • 微信小程序表单验证form提交错误提示效果

    微信小程序表单验证form提交错误提示效果

    这篇文章主要为大家详细介绍了微信小程序表单验证form提交错误提示效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07

最新评论