Es gibt ein Dropdown-Box mit AJAX im Suchfeld auf der Sina-Homepage. Wir müssen im Dropdown-Feld ein Klickelement implementieren, um den Wert im Suchfeld zu diesem Element zu ermitteln, und das Dropdown-Feld verschwindet, aber gleichzeitig verschwindet das Dropdown-Feld ebenfalls. Wie in der Abbildung gezeigt:
Wir verwenden Onblur und Onclick, um die Dropdown-Box zu verbergen, aber ein größeres Problem tritt auf. Diese beiden Funktionen konflikt. Onblur ist zu mächtig und es gibt keine Chance, die Onclick -Methode zu implementieren. Das Suchfeld kann den Inhalt des Klickelements nicht abrufen. Dies ist das Problem der Konflikte auf dem Onklick und Onblur, das wir lösen möchten.
Für dieses Problem führen wir zwei Lösungen ein:
1. Verwenden Sie SetTimeout, um die Ausführung der Onblur -Zeit zu verzögern, und führen Sie dann Onblur nach der Ausführung von Onclick aus. (Die Zeiteinstellung von SetTimeout sollte über 100 ms liegen, andernfalls funktioniert er immer noch nicht.) Der Beispielcode lautet wie folgt:
<! DocType html> <html> <head Lang = "en"> <meta charset = "utf-8"> <title> </title> <style> *{Margin: 0; Polsterung: 0; Listenstil: Keine; } Form {Breite: 500px; Rand: 0 Auto; Position: Relativ; Zoom: 1; } Form: nach {klare: beides; Inhalt: ""; Anzeige: Block; } .Text {float: links; Grenze: 1PX Solid #CCCCC; Padding-Links: 14px; Breite: 300px; Höhe: 34px; Zeilenhöhe: 34px; Schriftgröße: 14px; } .button {width: 50px; Höhe: 34px; Grenze: 1PX Solid #CCCCC; Zeilenhöhe: 34px; Schriftgröße: 14px; Farbe: #ffffff; Hintergrund:#ff8400; } ul {Position: absolut; Oben: 36px; links: 0; Breite: 300px; Grenzrechte: 1PX Solid #CCCCC; Border-Links: 1PX Solid #CCCCC; Hintergrund: grün; Anzeige: Keine; } li {Schriftgröße: 14px; Zeilenhöhe: 34px; Höhe: 34px; Farbe:#000000; Border-Bottom: 1PX Solid #CCCCC; } li: Hover {Hintergrund: Gelb; Farbe: Rot; Cursor: Zeiger; } </style> <script> window.onload = function () {var otext = document.getElementById ('text'); var Oul = document.getElementById ('ul'); var ali = Oul.getElementsByTagName ('li'); var timer = null; otext.onfocus = function () {this.Value = ''; Oul.Style.display = 'Block'; für (var i = 0; i <ali.length; i ++) {ali [i] .onclick = function () {ClearTimeout (Timer); otext.Value = this.innerhtml; Oul.Style.Display = 'none'; }; }}; otext.onblur = function () {timer = setTimeout (function () {oul.style.display = 'none'; if (! otext.value) {otext.value = 'Bitte geben Sie Keyword';}}, 120); }; }; </script> </head> <body> <form> <Eingabe type = "text" value = "Bitte geben Sie Schlüsselwort" id = "text"/> <Eingabe type = "button" value = "such"/> <ul id = "ul"> <li> zurück, ob das Fenster geschlossen wurde. </li> <li> Setzen oder geben Sie den Namen des Fensters zurück. </li> <li> Kehren Sie zur externen Höhe des Fensters zurück. </li> </ul> </form> </body> </html>2. Verwenden Sie Dokument
<! DocType html> <html> <head Lang = "en"> <meta charset = "utf-8"> <title> </title> <style> *{Margin: 0; Polsterung: 0; Listenstil: Keine; } Form {Breite: 500px; Rand: 0 Auto; Position: Relativ; Zoom: 1; } Form: nach {klare: beides; Inhalt: ""; Anzeige: Block; } .Text {float: links; Grenze: 1PX Solid #CCCCC; Padding-Links: 14px; Breite: 300px; Höhe: 34px; Zeilenhöhe: 34px; Schriftgröße: 14px; } .button {width: 50px; Höhe: 34px; Grenze: 1PX Solid #CCCCC; Zeilenhöhe: 34px; Schriftgröße: 14px; Farbe: #ffffff; Hintergrund:#ff8400; } ul {Position: absolut; Oben: 36px; links: 0; Breite: 300px; Grenzrechte: 1PX Solid #CCCCC; Border-Links: 1PX Solid #CCCCC; Hintergrund: grün; Anzeige: Keine; } li {Schriftgröße: 14px; Zeilenhöhe: 34px; Höhe: 34px; Farbe:#000000; Border-Bottom: 1PX Solid #CCCCC; } li: Hover {Hintergrund: Gelb; Farbe: Rot; Cursor: Zeiger; } </style> <script> window.onload = function () {var otext = document.getElementById ('text'); var Oul = document.getElementById ('ul'); var ali = Oul.getElementsByTagName ('li'); var timer = null; otext.onfocus = function () {this.Value = ''; Oul.Style.display = 'Block'; für (var i = 0; i <ali.length; i ++) {ali [i] .onclick = function () {ClearTimeout (Timer); otext.Value = this.innerhtml; Oul.Style.Display = 'none'; }; }}; document.onmouseDown = function (ev) {var oevent = ev || Ereignis; var target = oevent.target || oevent.srcelement; if (target.parentnode! }}; otext.onblur = function () {if (! otext.value) {otext.value = 'Bitte geben Sie ein Keyword ein'; }}; }; </script> </head> <body> <form> <Eingabe type = "text" value = "Bitte geben Sie das Schlüsselwort" id = "text"/> <Eingabe type = "button" value = "such"/> <ul id = "ul"> <li> zurück, ob das Fenster geschlossen wurde. </li> <li> Setzen oder geben Sie den Namen des Fensters zurück. </li> <li> Kehren Sie zur externen Höhe des Fensters zurück. </li> </ul> </form> </body> </html>Die schnelle Lösung für das oben genannte Konfliktproblem von Onclick und Onblur ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.