In der Front-End-Entwicklungsarbeit verwenden wir aufgrund der Browserkompatibilität und anderer Probleme häufig "Stop-Ereignisblasen" und "Block-Browser-Standardverhalten".
1. Blockieren Sie das Standardverhalten des Browsers
Funktion stopdefault (e) {// Wenn ein Ereignisobjekt bereitgestellt wird, handelt es sich um einen Nicht-I-Browser if (e && e.preventDefault) {// Block Standard-Browser-Aktion (W3C) E.PreventDefault (); } else {// So blockieren Sie die Standardaktion der Funktion in IE window.event.returnValue = false; } return false; }2. Stoppen Sie das Sprudeln von Ereignissen
Funktion stopbubble (e) {// Wenn ein Ereignisobjekt bereitgestellt wird, ist dies ein Nicht-I-Browser, wenn (e && e.stoppropagation) {// es unterstützt W3Cs stoppropagation () -Methode e.Stoppropagation (); } else {// Ansonsten müssen wir IE verwenden, um Ereignisblasen Window.event.cancelBubble = true; } return false; }Spezifisches Anwendungsbeispiel: Ein geschriebenes Projekt wurde dem Benutzer heute zur Verwendung übergeben, und viele Fragen wurden zurückgegeben, von denen eines sehr klassisch war:
Es gibt ein Formular auf einer Seite. Die Schaltfläche zum Senden des Formulars ist eine Taste. Verwenden Sie JQuery, um auf das Klicken dieser Schaltfläche zu antworten. Senden Sie es per Post. Der Benutzer gibt ein Textfeld ein. Nachdem der Benutzer das zum Ausfüllen zugegebene Sache eingetragen hat, drücken Sie die Eingabetaste direkt, was dem Drücken der Taste entspricht. Am Anfang habe ich dieses Problem nicht geachtet. Sobald ich die Eingabetaste drücke, sprang ich zu einer anderen Seite. Nachdem ich viele Informationen überprüft hatte, stellte ich fest, dass ich das Standardverhalten des Browsers blockieren wollte, da das Standardverhalten von Senden darin besteht, das Formular einzureichen, und dann wird Ihr JS nicht ausgeführt. Stornieren Sie also zunächst das Standardverhalten. Führen Sie dann Ihren JQ aus, um einzureichen. Ich kann die spezifischen Details nicht erklären. Ich weiß nur, dass der Typ = "Senden" im Textfeld direkt auf die Schaltfläche geklickt wird, sondern zu einer anderen Seite. Wenn type = "Schaltfläche" wird, wird dies nicht geschieht, wenn Sie auf die Schaltfläche klicken. Sie können Eingabetaste drücken, um zu einer anderen Seite zu springen. Die Lösung ist:
<Eingabe type = "text" name = "appgrpname_s" id = "appgrpname_s" onkeydown = "Enter_down (this.form, Ereignis);"/>
<script type = "text/javaScript"> Funktion Enter_down (Form, Ereignis) {if (Ereignis.KeyCode == "13") {stopdefault (Ereignis); Submitform (Formular, "actiondiv"); }} Funktion stopdefault (e) {// Wenn ein Ereignisobjekt bereitgestellt wird, ist dies ein Nicht-I-Browser if (e && e.preventDefault) {// Blockieren Sie die Standard-Browser-Aktion (W3C) E.PreventDefault (); } else {// So blockieren Sie die Standardaktion der Funktion in IE window.event.returnValue = false; } return false; } </script>Über den obigen Code können Sie erkennen, dass beim Drücken der Eingabetaste es gleichwertig ist, auf die Schaltfläche "Senden" zu klicken. Und der obige Code ist mit IE und FF -Browsern kompatibel.
Manchmal, wenn Sie auf einige Taste -Taste -Verhaltensweisen stoßen, die den Browser blockieren müssen, wie z.
Beachten Sie, dass Sie die Funktion StopDefault (Ereignis) im Onkeydown -Ereignis aufrufen müssen, und der Anruf im ONTYUP -Ereignis ist erfolglos.
<span style = "color: rgb (51, 153, 51);"> </</span> a onclick <span style = "color: rgb (51, 153, 51);"> = </span> <span style = "color: rgb (51, 153, 51); 51); ">>> </span> a <span style =" color: rgb (51, 153, 51); ">> </</span> a <span style =" color: rgb (51, 153, 51); ">> </span>
Da HREF ein Nullwert ist und das Standardverhalten des Browsers nicht blockiert ist, besteht der Effekt darin, die Seite zu aktualisieren.
Jetzt müssen wir nur noch das Link -Ereignis von HREF blockieren und das Onclick -Ereignis ausführen.
Alte Art des Umgangs:
<span style = "color: rgb (51, 153, 51);"> <</span> a onclick <span style = "color: rgb (51, 153, 51);"> = </span> <span style = "color: rgb (51, 102, 204); href <span style = "color: rgb (51, 153, 51);"> = </span> <span style = "color: rgb (51, 153, 51);"> = </span> <span style = "color: rgb (51, 102, 204); href<span style="color: rgb(51, 153, 51);">=</span><span style="color: rgb(51, 102, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 204); RGB (51, 153, 51); ">> </span>
Wie man jQuery schreibt:
1) FALSCH zurückgeben: Im Ereignishandler verhindert das Standardverhalten und die Ereignisblase.
Rückgabe bei der Verarbeitung von Ereignissen, Standard -Ereignisse und sprudelnde Ereignisse können blockiert werden.
2) Ereignis.PreventDefault (): Im Ereignishandler wird ein Standard -Ereignis verhindern (erlaubt Bubblerering).
Ereignis.PreventDefault () kann das Standardereignis verhindern, aber das Auftreten von Blasenereignissen zulassen.
3) Ereignis.
Ereignis.StopPropagation () kann verhindern, dass er sprudelt, aber das Auftreten von Standardereignissen zulässt.
So schreiben Sie Prototypen:
Event.Stop (Ereignis)
Nutzung Einführung:
Nachdem ein Ereignis aufgetreten ist, löst der Browser normalerweise zunächst den Ereignishandler des Ereignisvorkommenselements, dann sein übergeordnetes Element, das übergeordnete Element des übergeordneten Elements aus ... und so weiter bis zum Stammelement des Dokuments. Dies wird als Ereignisblasen bezeichnet und ist die häufigste Art und Weise, wie Ereignisse sich ausbreiten. Nachdem ein Ereignis bearbeitet wurde, möchten Sie möglicherweise die Ausbreitung des Ereignisses stoppen und möchten nicht, dass es weiter sprudelt.
Wenn Ihr Programm die Möglichkeit hat, ein Ereignis zu verarbeiten, wird es auch der Browser verarbeitet, wenn das Ereignis ein Standardverhalten hat. Klicken Sie beispielsweise auf den Navigationslink, senden Sie das Formular an den Server, drücken Sie die Eingabetaste in ein einzelnes Textfeld und so weiter. Wenn Sie Ihre eigene Art, diese Ereignisse zu bearbeiten, definieren, sind Sie möglicherweise sehr bereit, das relevante Standardverhalten zu blockieren.
Manchmal kann das entsprechende Problem jedoch nicht gelöst werden. Obwohl die Methode zum Blockieren des Standardverhaltens des Browsers aufgerufen wurde, wird das Standardverhalten beim Drücken der Eingabetaste weiterhin aufgerufen. Am Ende wurde das Problem nicht gefunden, daher musste ich die Eingabetaste deaktivieren. Tatsächlich wird die Registerkarte anstelle der Eingabetaste verwendet. Der Code ist wie folgt:
<script Language = "JavaScript" Event = "Onkeydown" für = "Dokument"> // Wenn es sich um die Eingabetaste handelt, wenn (Ereignis.KeyCode == 13) {// es in die Registerkarte Taste ändern, so dass der Cursor jedes Mal, wenn Sie die Eingabetaste drücken, der Cursor springt. } </script> <script Language = "javaScript" type = "text/javascript"> // Deaktivieren Sie das Schlüsselformular ein, um das Dokument automatisch zu senden. if (! event) {event = window.event; // für IE Browser target = event.srcelement; code = event.KeyCode; if (code == 13) {tag = target.tagname; if (tag == "textarea") {return true; } else {return false; }}} else {target = event.target; // für Browser, die dem W3C -Standard folgen, wie z. B. Firefox Code = Event.KeyCode; if (code == 13) {tag = target.tagname; if (tag == "input") {return false; } else {return true; }}}}}; </script>Spezifische Verwendungsbeispiele:
<! DocType html public "-// w3c // dtd html 4.01 transitional // en"> <%@ page Language = "java" import = "java.util. http-äquiv = "pragma" content = "no-cache"> <meta http-äquiv = "cache-control" content = "no-cache"> <meta http-äquiv = "Abgibt" content = "0"> <meta http-äquiv GotOpage (CurrentPage, Form) {goto_page (currentPage, Form, "actionDiv"); } Funktion addAppGgrp () {$ ("#actionDiv"). load ("$ {contextPath} /pages/Manage/business/add.jsp"); $ ("#zufällig_search_div"). hide (); } Funktion modifyAppgrp (IDName) {var id = cododeuricomponent (idName); var url = contextName + "/appgrpaction.do?method=addAppgrp&appgrpname="+ id; retrieveurl (URL, 'actionDiv'); $ ("#zufällig_search_div"). hide (); } function SaveBusiness (thisform) {var name = $ ("#appgrpname"). val (); if (name.trim () == "") {alert ("Der Gruppenname kann nicht leer sein."); zurückkehren; } subjekt (thisform, null, AfterSave); zurückkehren ; } Funktion AfterSave (Inhalt) {if (content! = null && content! = "") {var arr = content.split (","); if (arr [0] == "true") {$ ("#zufällig_search_div"). show (); // aktueller Knoten var itemid = "0 ::" + $ ("#Appgrpname"). Val (); // Präsidierter Knoten, da diese Methode nur beim Hinzufügen der Root -Anwendungsgruppe ausgeführt wird, ist der übergeordnete Knoten einheitlich -1 var parentID = -1; // aktueller Knotenanzeige Name var itemText = $ ("#AppgrpName"). Val (); // Neue Knotenbaum hinzufügen retrieveUrl ("$ {contextPath} /AppgrPaction.do?method=AppgrPlist", "actionDiv"); zurückkehren; } alert (arr [1]); zurückkehren; } alert ("speichern"); zurückkehren; } function DeleteBusiness (thisform, idName) {if (bestätigen (“(" Möchten Sie löschen? ")) {var id = codeuricomponent (idName); RetrieveUrl ("$ {contextPath} /Appgrpaction.do?method=DeletAppgrp&appgrpname=" + id, null, null, function (content) {if (content! = null && content! Anwendung unter dieser Anwendungsgruppe. Wollen Sie es erzwingen, es zu löschen? "; if (bestätigen (msg)) {retrieveurl (" $ {contextPath} /Appgrpaction.do?method=Forcedelappgrp&appgrpgrpname = "+id, null, null, achtercedel);} return; node itemID = "0 ::" + idname; zurückkehren ; }} function AFFORCEDEL () {if (content! = null && content! = "") {var arr = content.split (","); if (arr [0] == "true") {MonitorTree (); retrieveUrl ("$ {contextPath} /AppgrPaction.do?method=AppgrPlist", "actionDiv"); zurückkehren; } alert (arr [1]); zurückkehren; } alert ("speichern"); zurückkehren; } function Enter_down (Form, Ereignis) {if (Ereignis.KeyCode == "13") {stopdefault (Ereignis); Submitform (Formular, "actiondiv"); }} Funktion stopdefault (e) {// Wenn ein Ereignisobjekt bereitgestellt wird, ist dies ein Nicht-Browser if (e && e.preventDefault) {// Blockieren Sie die Standard-Browser-Aktion (W3C) E.PreventDefault (); } else {// So blockieren Sie die Standardaktion der Funktion in IE window.event.returnValue = false; } return false; } </script> </head> <body> <table> <tr> <td style = "text-align: links;"> <div id = "zufolge_search_div"> <html: Form Action = "appgrpaction.do?method=appGrPlist" < /tr> <tr> <td style = "text-align: links; padding-links: 50px;"> <br /> name <Eingabe type = "text" name = "appgrpname_s" id = "Appgrpname_S" onblur = "javascript: issPecialchary (this);" OnKeydown = "Enter_down (this.Form, Ereignis);"/> <Eingabe type = "Schaltfläche" value = "query" onclick = "javaScript: subschrittform (this.form, 'actiondiv');" /> <Eingabe type = "button" value = "add" onclick = "JavaScript: addAppGRp ();"/> <br/> </td> </tr> </table> </tml: Form> </div> <div id = "actiondiv"> </div> </td> </tr> </table> </$ </$ </$ <! } /Appgrpaction.do?method=Appgrist&random= " + math.random ()); -> </script> </body> </html>Der obige Code zur Verhinderung des Standardbrowserverhaltens und des sprudelnden Verhaltens von JS ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, es kann Ihnen eine Referenz geben und ich hoffe, Sie können Wulin.com mehr unterstützen.