Récemment, lorsque je faisais une petite chose, je devais "cliquer avec le bouton droit sur un certain élément pour déclencher un menu personnalisé et modifier l'entrée clicée via un menu personnalisé. Cela nécessite de bloquer le menu de clic droit par défaut
Les éléments ci-dessous IE et FF ont la méthode onContextMenu. Sous FF, vous pouvez facilement réaliser cet effet en utilisant 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 déclenchant la méthode et en renvoyant FAUX.
Habituellement, nous utilisons l'événement à clic droit pour bloquer le bloc global, c'est-à-dire que le clic droit est bloqué au niveau du document. Maintenant, l'effet que je veux réaliser est de ne bloquer que l'événement de clic droit par défaut dans une zone spécifique, tandis que d'autres zones ne l'affectent pas.
Grâce à des expériences, j'ai constaté que si le retour faux dans la méthode liée sous IE peut réaliser le comportement par défaut de bloquer les clics droits au niveau du document. Cependant, si un élément spécifique tel qu'une div n'est pas valide.
Enfin, via le manuel de recherche, j'ai trouvé que l'objet de l'événement sous IE a une propriété de retour. Si cette propriété est définie sur False, l'événement de clic droit par défaut ne sera pas déclenché. Semblable à ce qui suit:
La copie de code est la suivante:
event.ReturnValue = false;
Ajoutez simplement cette phrase pour réaliser l'effet que je veux. 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"> <éad> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <ititle> Bloquer le bouton de souris droit sur un élément demo </ title> <style> Body {FONT-SIZE: 12px; hauteur de ligne: 24px; Font-Family: Arial, Helvetica, SANS-Serif;} # Activarea {Width: 300px; hauteur: 200px; Contexte: # 06C; couleur: #fff;} # cstcm {width: 120px; Contexte: #eee; Border: 1px solide #ccc; Position: absolue; } #cstcm ul {margin: 0; rembourrage: 0;} # cstcm ul li {list-style: aucun; rembourrage: 0 10px; curseur: par défaut;} # cstcm ul li: hover {background: # 009; Couleur: #ffff;}. SplitTop {border-bottom: 1px solide #ccc;}. SplitBottom {border-top: 1px solide #fff;} </ style> <script> function customContextMenu (event) {event.PreventDefault? 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'; clearCustomCm;} fonction clearCustomcm () {document.getElementById ('cstcm'). style.display = 'nothere'; document.onmousedown = null;} </cript> </ad> <body> <div id = "cstcm" style = "affiche: aucun;"> <ul> <li> View </li> <li> Par </li> <li> Refresh </li> <li> Paste </li> <li> Clorce de pâte </li> <li> Propriété </li> </ul> </div> <div id = "Activarea" OnContextMenu = "CustomContextMenu (événement)"> Zone de menu contextuel personnalisé </v> </ body> </html>Cet effet est compatible avec IE6 + et FF, mais l'opéra n'a pas du tout la méthode onContextMenu, il ne peut donc pas être simplement implémenté via cette méthode. Pour y parvenir, d'autres moyens sont nécessaires.