Kürzlich, als ich eine kleine Sache machte, musste ich mit der rechten Maustaste auf ein Element "mit der rechten Maustaste klicken", um ein benutzerdefiniertes Menü auszulösen und die rechten Maustaste über ein benutzerdefiniertes Menü zu bearbeiten. Dies erfordert das Blockieren des Standardmenüs mit dem Standard-Klick-Menü
Die folgenden Elemente, dh und FF, haben die OncontextMenu -Methode. Unter FF können Sie diesen Effekt problemlos mit der Methode von Ereignis.PreventDefault () erreichen. IE unterstützt diese Methode nicht. Unter IE wird das Standardereignis im Allgemeinen blockiert, indem die Methode ausgelöst und falsch zurückgegeben wird.
Normalerweise verwenden wir das Rechtsklick-Ereignis, um den globalen Block zu blockieren, dh der Rechtsklick wird auf Dokumentebene blockiert. Der Effekt, den ich erreichen möchte, besteht nun darin, das Standard-Rechtsklickereignis in einem bestimmten Bereich nur zu blockieren, während andere Bereiche ihn nicht beeinflussen.
Durch Experimente stellte ich fest, dass, wenn die Rückgabe in der gebundenen Methode unter IE das Standardverhalten des Blockierens der Rechtsklicks auf Dokumentebene erreichen kann. Wenn jedoch ein bestimmtes Element wie ein DIV ungültig ist.
Schließlich stellte ich durch das Suchhandbuch fest, dass das Ereignisobjekt unter dem IE eine Eigenschaft für Rückkehr -Wert aufweist. Wenn diese Eigenschaft auf false eingestellt ist, wird das Standard-Rechtsklickereignis nicht ausgelöst. Ähnlich wie folgt:
Die Codekopie lautet wie folgt:
Ereignis.ReturnValue = false;
Fügen Sie diesen Satz einfach hinzu, um den gewünschten Effekt zu erzielen. Komplette Democode:
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd"><Htmlmlml xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> Blockieren Sie den richtigen MOUS-Button-Ereignis. Zeilenhöhe: 24px; Schriftfamilie: Arial, Helvetica, sans-serif;}#activeArea {width: 300px; Höhe: 200px; Hintergrund:#06c; Farbe: #fff;}#cstcm {width: 120px; Hintergrund: #eee; Grenze: 1PX Solid #CCC; Position: absolut; } #cstcm ul {margin: 0; Padding: 0;}#CSTCM UL Li {Listenstil: Keine; Polsterung: 0 10px; Cursor: Standard;}#cstcm ul li: hover {Hintergrund:#009; Farbe: #ffff;}. Splittop {Border-Bottom: 1PX Solid #ccc;}. Splitbottom {Border-Top: 1PX Solid #fff;} </style> <script> Funktion CustomContextMenu (Ereignis) {Event.PreventDeFault? Event.PreventDefault () :( Ereignis.ReturnValue = false); var cstcm = document.getElementById ('cstcm'); cstcm.style.left = event.clientX + 'px'; ClearCustomcm;} Funktion clearCustomcm () {document.getElementById ('cstcm'). style.display = 'none'; document.onmouseDown = null;} </script> </head> <body> <div id = "cstcm" style = "style =" display: none; Von </li> <li> Aktualisieren </li> <li> Einfügen </li> <li> Verknüpfung </li> <li> Eigenschaft </li> </ul> </div> <div id = "activeArea" OncontextMenu = "CustomContextMenu (Ereignis)"> benutzerdefinierte Kontextmenüer </div> </body> </html>Dieser Effekt ist mit IE6+ und FF kompatibel, aber Opera hat überhaupt nicht die OncontextMenu -Methode, sodass sie nicht einfach durch diese Methode implementiert werden kann. Um dies zu erreichen, sind andere Mittel erforderlich.