suchen

Heim >Web-Frontend >js-Tutorial >Methoden und Beispiele von Javascript zur Verhinderung des Ereignisses der rechten Maustaste auf einem Element_Javascript-Fähigkeiten

Methoden und Beispiele von Javascript zur Verhinderung des Ereignisses der rechten Maustaste auf einem Element_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 16:39:491832Durchsuche

Als ich kürzlich an einer kleinen Sache arbeitete, musste ich mit der rechten Maustaste auf ein Element klicken, um ein benutzerdefiniertes Menü auszulösen, und das mit der rechten Maustaste angeklickte Element über das benutzerdefinierte Menü bearbeiten. Dies erfordert das Blockieren des Standard-Rechtsklickmenüs

Elemente unter IE und FF verfügen über die oncontextmenu-Methode. Unter FF kann dieser Effekt einfach über die Methode event.preventDefault() erreicht werden. IE unterstützt diese Methode nicht. Unter IE wird das Standardereignis im Allgemeinen blockiert, indem nach dem Auslösen der Methode „false“ zurückgegeben wird.

Wenn wir Rechtsklick-Ereignisse blockieren, blockieren wir sie normalerweise global, d , während andere Bereiche nicht betroffen sind.

Durch Experimente habe ich herausgefunden, dass, wenn Sie in der Bindungsmethode unter IE false zurückgeben, das Standardverhalten, das Rechtsklicken zu verhindern, auf Dokumentebene erreicht werden kann. Aber wenn es um ein bestimmtes Element wie div geht, funktioniert es nicht.

Schließlich habe ich beim Durchsuchen des Handbuchs festgestellt, dass das Ereignisobjekt unter IE ein returnValue-Attribut hat. Wenn dieses Attribut auf false gesetzt ist, wird das Standard-Rechtsklick-Ereignis nicht ausgelöst. Etwa so:

Code kopieren Der Code lautet wie folgt:

event.returnValue = false;

Allein das Hinzufügen dieses Satzes wird den gewünschten Effekt erzielen. Vollständiger Democode: 

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

Dieser Effekt ist mit IE6 und FF kompatibel, Opera verfügt jedoch überhaupt nicht über die Oncontextmenu-Methode und kann daher nicht einfach mit dieser Methode erreicht werden. Um ihn zu erreichen, sind andere Mittel erforderlich.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：js verwendet eine for-Schleife, um abzufragen, ob ein bestimmter Wert in einem array_javascript-Skills vorhanden istNächster Artikel：js verwendet eine for-Schleife, um abzufragen, ob ein bestimmter Wert in einem array_javascript-Skills vorhanden ist

In Verbindung stehende Artikel

Mehr sehen