element_javascript 스킬에서 마우스 오른쪽 버튼 이벤트를 방지하는 자바스크립트 방법 및 예-JS 튜토리얼-php.cn

element_javascript 스킬에서 마우스 오른쪽 버튼 이벤트를 방지하는 자바스크립트 방법 및 예

WBOY

풀어 주다： 2016-05-16 16:39:49

원래의

1835명이 탐색했습니다.

최근에 작은 작업을 할 때 요소를 "마우스 오른쪽 버튼으로 클릭"하여 맞춤 메뉴를 실행하고, 마우스 오른쪽 버튼으로 클릭한 항목을 맞춤 메뉴를 통해 편집해야 했습니다. 이를 위해서는 기본 오른쪽 클릭 메뉴를 차단해야 합니다

IE 및 FF의 요소에는 oncontextmenu 메서드가 있습니다. FF에서는 event.preventDefault() 메서드를 통해 이 효과를 쉽게 얻을 수 있습니다. IE에서는 이 메서드를 지원하지 않습니다. IE에서는 일반적으로 메서드를 트리거한 후 false를 반환하여 기본 이벤트를 차단합니다.

일반적으로 마우스 오른쪽 버튼 클릭 이벤트를 차단할 때 전역적으로 차단합니다. 즉, 문서 수준에서 마우스 오른쪽 버튼 클릭 이벤트를 차단합니다. 지금 달성하려는 효과는 특정 영역에서만 기본 마우스 오른쪽 버튼 클릭 이벤트를 차단하는 것입니다. , 다른 지역은 영향을 받지 않습니다.

실험을 통해 IE의 바인딩 방법에서 false를 반환하면 문서 수준에서 마우스 오른쪽 버튼 클릭을 방지하는 기본 동작을 구현할 수 있음을 발견했습니다. 하지만 div와 같은 특정 요소의 경우에는 작동하지 않습니다.

마지막으로 매뉴얼을 검색해보니 IE의 이벤트 객체에 returnValue 속성이 있는 것으로 나타났습니다. 이 속성을 false로 설정하면 기본 오른쪽 클릭 이벤트가 발생하지 않습니다. 다음과 같습니다:

코드 복사 코드는 다음과 같습니다.

event.returnValue = false;

이 문장만 추가하면 원하는 효과를 얻을 수 있습니다. 전체 데모 코드:

<!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>

로그인 후 복사

이 효과는 IE6 및 FF와 호환되지만 Opera에는 oncontextmenu 방식이 전혀 없으므로 이 방식으로는 간단히 구현할 수 없습니다. 이를 구현하려면 다른 수단이 필요합니다.