Maison > Article > interface Web > Méthodes et exemples de javascript pour empêcher l'événement du bouton droit de la souris sur une compétence element_javascript

Méthodes et exemples de javascript pour empêcher l'événement du bouton droit de la souris sur une compétence element_javascript

WBOYoriginal: 2016-05-16 16:39:491762parcourir

Lorsque je travaillais sur une petite chose récemment, j'avais besoin de "cliquer avec le bouton droit" sur un élément pour déclencher un menu personnalisé et de modifier l'élément cliqué avec le bouton droit via le menu personnalisé. Cela nécessite de bloquer le menu contextuel par défaut

Les éléments sous IE et FF ont la méthode oncontextmenu. Sous FF, cet effet peut être facilement obtenu grâce à la méthode event.preventDefault(). IE ne prend pas en charge cette méthode. Sous IE, l'événement par défaut est généralement bloqué en renvoyant false après le déclenchement de la méthode.

Habituellement, lorsque nous bloquons les événements de clic droit, nous les bloquons globalement, c'est-à-dire que nous interceptons les événements de clic droit au niveau du document. Maintenant, l'effet que je souhaite obtenir est de bloquer l'événement de clic droit par défaut uniquement dans des zones spécifiques. , alors que les autres zones ne sont pas concernées.

Grâce à des expériences, j'ai découvert que si vous renvoyez false dans la méthode de liaison sous IE, le comportement par défaut consistant à empêcher le clic droit peut être obtenu au niveau du document. Mais lorsqu’il s’agit d’un élément spécifique tel que div, cela ne fonctionne pas.

Enfin, en recherchant dans le manuel, j'ai découvert que l'objet événement sous IE possède un attribut returnValue. Si cet attribut est défini sur false, l'événement de clic droit par défaut ne sera pas déclenché. Quelque chose comme ça :

Copier le code Le code est le suivant :

event.returnValue = false;

Le simple fait d'ajouter cette phrase obtiendra l'effet que je souhaite. Code de démonstration complet :

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

Cet effet est compatible avec IE6 et FF, mais Opera n'a pas du tout la méthode oncontextmenu, il ne peut donc pas être simplement obtenu via cette méthode. Pour y parvenir, d'autres moyens sont nécessaires.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：js utilise la boucle for pour demander si une certaine valeur existe dans un tableau_javascript skillsArticle suivant：js utilise la boucle for pour demander si une certaine valeur existe dans un tableau_javascript skills

Articles Liés

Voir plus