当前位置: 首页 > 编程笔记 >

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

屠钊
2023-03-14
本文向大家介绍javascript实现在某个元素上阻止鼠标右键事件的方法和实例,包括了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实现禁止鼠标右键的功能,包括了JS实现禁止鼠标右键的功能的使用技巧和注意事项,需要的朋友参考一下 遇到网页上有精美图片或者精彩文字想保存时,通常大家都是选中目标后按鼠标右键,在弹出菜单中选择“图片另存为”或“复制”来达到我们的目的。但是,目前有许多网页都屏蔽了鼠标右键,那么用js如何实现禁止鼠标右键的功能呢? 1.与禁止鼠标右键相关的JS说明 2.禁止鼠标右键火狐失灵 3.禁止选

  • 本文向大家介绍JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例,包括了JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例的使用技巧和注意事项,需要的朋友参考一下 JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例 以上这篇JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支

  • 本文向大家介绍两种JS实现屏蔽鼠标右键的方法,包括了两种JS实现屏蔽鼠标右键的方法的使用技巧和注意事项,需要的朋友参考一下 JS屏蔽鼠标右键的两种方法,比较常用的一个JS小功能,用上这个代码后,浏览者在访问你网页的时候就不能点击右键了,点了也不会弹出右键菜单,本功能最好不要用的太多哦,有时候用户会反感的。 代码如下: 以上就是本文的全部内容,希望对大家的学习有所帮助。

  • 我有一个创建元素的脚本,创建过程的一部分是添加onclick事件(使用addEventListener),但当我单击子元素时,会触发父元素的onclick事件。当源是子元素时,如何防止检测到单击?

  • 问题内容: 在我的三个按钮上,鼠标=中键单击和=右键单击。 两键鼠标就是这种情况吗? 谢谢 问题答案: 为了避免任何歧义,请使用SwingUtilities中的实用程序方法:

  • 问题内容: 禁用浏览器上下文菜单后,如何右键单击触发一些动作? 我试过了。。。 问题答案: jQuery中没有内置的oncontextmenu事件处理程序,但是您可以执行以下操作: 基本上,我取消了DOM元素的oncontextmenu事件以禁用浏览器上下文菜单,然后使用jQuery捕获mousedown事件,您可以在事件参数中知道按下了哪个按钮。