Home >Web Front-end >JS Tutorial >Methods and examples of javascript to prevent the right mouse button event on an element_javascript skills

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

WBOYOriginal: 2016-05-16 16:39:491832browse

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>

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.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js uses for loop to query whether a certain value exists in an array_javascript skillsNext article：js uses for loop to query whether a certain value exists in an array_javascript skills

See more

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

Related articles