Methods and examples of javascript to prevent the right mouse button event on an element

Methods and examples of javascript to prevent the right mouse button event on an element_javascript skills

WBOY

Release： 2016-05-16 16:39:49

Original

1814 people have browsed it

When I was working on a small thing recently, I needed to "right-click" on an element to trigger a custom menu, and edit the right-clicked item through the custom menu. This requires blocking the default right-click menu

Elements under IE and FF have the oncontextmenu method. Under FF, this effect can be easily achieved through the event.preventDefault() method. IE does not support this method. Under IE, the default event is generally blocked by returning false after triggering the method.

Usually when we block right-click events, we block them globally, that is, intercept right-click events at the document level. The effect I want to achieve now is to block the default right-click event only in specific areas, while other areas are not affected.

Through experiments, I found that if you return false in the binding method under IE, the default behavior of preventing right-clicking can be achieved at the document level. But when it comes to a specific element such as div, it doesn't work.

Finally, by searching the manual, I found that the event object under IE has a returnValue attribute. If this attribute is set to false, the default right-click event will not be triggered. Something like this:

Copy code The code is as follows:

event.returnValue = false;

Just adding this sentence will achieve the effect I want. Complete Demo code:

<!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 &#63; 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>

Copy after login

This effect is compatible with IE6 and FF, but Opera does not have the oncontextmenu method at all, so it cannot be simply achieved through this method. To achieve it, other means are needed.