Hay un cuadro desplegable que usa Ajax en el cuadro de búsqueda en la página de inicio de Sina. Necesitamos implementar un elemento de clic en el cuadro desplegable para que el valor en el cuadro de búsqueda se convierta en este elemento, y el cuadro desplegable desaparece, pero al mismo tiempo, al hacer clic en otros lugares, el cuadro desplegable también desaparecerá. Como se muestra en la figura:
Usamos Onblur y Onclick para ocultar el cuadro desplegable, pero surge un problema mayor. Estas dos funciones entran en conflicto. Onblur es demasiado poderoso y no hay posibilidad de implementar el método OnClick. El cuadro de búsqueda no puede obtener el contenido del elemento de clic. Este es el problema de conflicto OnClick y Onblur que queremos resolver.
Para este problema, presentamos dos soluciones:
1. Use SetTimeout para retrasar la ejecución del tiempo Onblur y luego ejecute Onblur después de la ejecución de OnClick. (La configuración de tiempo de SetTimeOut debe estar por encima de los 100 ms, de lo contrario todavía no funciona) El código de ejemplo es el siguiente:
<! DocType html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> <style> *{margin: 0; relleno: 0; Estilo de lista: Ninguno; } formulario {ancho: 500px; margen: 0 auto; Posición: relativo; Zoom: 1; } Forma: After {clare: ambos; contenido: ""; Pantalla: bloque; } .Text {float: izquierda; borde: 1px sólido #ccccccc; ROLDE-LEFUNTO: 14PX; Ancho: 300px; Altura: 34px; Línea-aguja: 34px; tamaño de fuente: 14px; } .button {ancho: 50px; Altura: 34px; borde: 1px sólido #ccccccc; Línea-aguja: 34px; tamaño de fuente: 14px; Color: #ffffff; Antecedentes:#FF8400; } ul {posición: absoluto; arriba: 36px; Izquierda: 0; Ancho: 300px; border-right: 1px sólido #cccccc; Border-izquierda: 1px Solid #CCCCCC; Antecedentes: verde; Pantalla: ninguno; } li {font-size: 14px; Línea-aguja: 34px; Altura: 34px; Color:#000000; Border-Bottom: 1px Solid #CCCCCC; } li: hover {fondo: amarillo; Color: rojo; cursor: puntero; } </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 = 'bloque'; for (var i = 0; i <ali.length; i ++) {ali [i] .Onclick = function () {ClearTimeOut (Temperador); oText.Value = this.innerhtml; oul.style.display = 'Ninguno'; }; }}; oText.onblur = function () {timer = setTimeOut (function () {oUl.style.display = 'none'; if (! oText.Value) {oText.value = 'Ingrese la palabra clave';}}, 120); }; }; </script> </head> <body> <form> <input type = "text" value = "Por favor, ingrese la palabra clave" id = "text"/> <input type = "button" value = "search"/> <ul id = "ul"> <li> Devuelve si la ventana ha sido cerrada </li> <li> Devuelve la altura del área de visualización del documento de la ventana de la ventana </li> <li> Devolver el width de la ventana de la ventana de la ventana del documento. </li> <li> Establezca o devuelva el nombre de la ventana. </li> <li> Regrese a la altura externa de la ventana. </li> </ul> </form> </body> </html>2. Use el documento.
<! DocType html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> <style> *{margin: 0; relleno: 0; Estilo de lista: Ninguno; } formulario {ancho: 500px; margen: 0 auto; Posición: relativo; Zoom: 1; } Forma: After {clare: ambos; contenido: ""; Pantalla: bloque; } .Text {float: izquierda; borde: 1px sólido #ccccccc; ROLDE-LEFUNTO: 14PX; Ancho: 300px; Altura: 34px; Línea-aguja: 34px; tamaño de fuente: 14px; } .button {ancho: 50px; Altura: 34px; borde: 1px sólido #ccccccc; Línea-aguja: 34px; tamaño de fuente: 14px; Color: #ffffff; Antecedentes:#FF8400; } ul {posición: absoluto; arriba: 36px; Izquierda: 0; Ancho: 300px; border-right: 1px sólido #cccccc; Border-izquierda: 1px Solid #CCCCCC; Antecedentes: verde; Pantalla: ninguno; } li {font-size: 14px; Línea-aguja: 34px; Altura: 34px; Color:#000000; Border-Bottom: 1px Solid #CCCCCC; } li: hover {fondo: amarillo; Color: rojo; cursor: puntero; } </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 = 'bloque'; for (var i = 0; i <ali.length; i ++) {ali [i] .Onclick = function () {ClearTimeOut (Temperador); oText.Value = this.innerhtml; oul.style.display = 'Ninguno'; }; }}; document.OnMousEdown = function (ev) {var oevent = ev || event; var Target = oevent.Target || oevent.srcelement; if (Target.ParentNode! == OUl && Target! == oText) {oUl.Style.Display = 'None'; }}; oText.Onblur = function () {if (! oText.Value) {oText.Value = 'Por favor, ingrese la palabra clave'; }}; }; </script> </head> <body> <form> <input type = "text" value = "Por favor, ingrese la palabra clave" id = "text"/> <input type = "button" value = "search"/> <ul id = "ul"> <li> Devuelve si la ventana se ha cerrado </li> <li> devuelve la altura de la área de visualización del documento de la ventana </li> <li> regresa al amplio de la ventana de la ventana de la ventana de la ventana del documento. </li> <li> Establezca o devuelva el nombre de la ventana. </li> <li> Regrese a la altura externa de la ventana. </li> </ul> </form> </body> </html>La solución rápida al problema de conflicto anterior de OnClick y Onblur es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.