Il y a une boîte déroulante utilisant Ajax dans la zone de recherche sur la page d'accueil de SINA. Nous devons implémenter un élément de clic dans la zone déroulante pour faire en sorte que la valeur de la zone de recherche devienne cet élément, et la boîte déroulante disparaît, mais en même temps, lorsque vous cliquez sur d'autres endroits, la boîte déroulante disparaîtra également. Comme indiqué sur la figure:
Nous utilisons onblur et onclick pour cacher la boîte déroulante, mais un problème plus important se pose. Ces deux fonctions sont en conflit. OnBlur est trop puissant et il n'y a aucune chance d'implémenter la méthode onClick. La zone de recherche ne peut pas obtenir le contenu de l'élément de clic. Il s'agit du problème de conflit Onclick et ONBLUR que nous voulons résoudre.
Pour ce problème, nous introduisons deux solutions:
1. Utilisez Settimeout pour retarder l'exécution d'Onblur Time, puis exécutez ONBLUR après l'exécution d'OnClick. (Le paramètre de temps de SetTimeout doit être supérieur à 100 ms, sinon il ne fonctionne toujours pas) L'exemple de code est le suivant:
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <tapie> </ title> <style> * {margin: 0; rembourrage: 0; Style de liste: aucun; } form {width: 500px; marge: 0 auto; Position: relative; Zoom: 1; } formulaire: après {clear: les deux; contenu: ""; Affichage: bloc; } .Text {float: Left; Border: 1px solide #cccccc; Padding-Left: 14px; Largeur: 300px; hauteur: 34px; Heure de ligne: 34px; taille de police: 14px; } .button {width: 50px; hauteur: 34px; Border: 1px solide #cccccc; Heure de ligne: 34px; taille de police: 14px; Couleur: #ffffff; Contexte: # FF8400; } ul {position: absolue; En haut: 36px; à gauche: 0; Largeur: 300px; Border-droite: 1px solide #cccccc; Border-Left: 1px solide #cccccc; Contexte: vert; Affichage: aucun; } li {Font-Size: 14px; Heure de ligne: 34px; hauteur: 34px; Couleur: # 000000; Border-Bottom: 1px solide #CCCCC; } li: Hover {fond: jaune; Couleur: rouge; curseur: pointeur; } </ style> <cript> 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 = 'bloc'; pour (var i = 0; i <ali.length; i ++) {ali [i] .OnClick = function () {ClearTimeout (timer); otext.value = this.innerhtml; oul.style.display = 'Aucun'; }; }}; otext.onblur = function () {timer = setTimeout (function () {oul.style.display = 'nul'; if (! otext.value) {otext.value = 's'il vous plaît entrez le mot-clé';}}, 120); }; }; </ script> </ head> <body> <form> <input type = "text" value = "s'il vous plaît entrez le mot-clé" id = "text" /> <input type = "Button" value = "search" /> <ul id = "ul"> <li> Renvoyez si la fenêtre a été fermée </li> <li> Renvoie la hauteur de la zone d'affichage du document de la fenêtre. </li> <li> Définissez ou renvoyez le nom de la fenêtre. </li> <li> Revenez à la hauteur externe de la fenêtre. </li> </ul> </ Form> </ Body> </html>2. Utilisez un document.
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <tapie> </ title> <style> * {margin: 0; rembourrage: 0; Style de liste: aucun; } form {width: 500px; marge: 0 auto; Position: relative; Zoom: 1; } formulaire: après {clear: les deux; contenu: ""; Affichage: bloc; } .Text {float: Left; Border: 1px solide #cccccc; Padding-Left: 14px; Largeur: 300px; hauteur: 34px; Heure de ligne: 34px; taille de police: 14px; } .button {width: 50px; hauteur: 34px; Border: 1px solide #cccccc; Heure de ligne: 34px; taille de police: 14px; Couleur: #ffffff; Contexte: # FF8400; } ul {position: absolue; En haut: 36px; à gauche: 0; Largeur: 300px; Border-droite: 1px solide #cccccc; Border-Left: 1px solide #cccccc; Contexte: vert; Affichage: aucun; } li {Font-Size: 14px; Heure de ligne: 34px; hauteur: 34px; Couleur: # 000000; Border-Bottom: 1px solide #CCCCC; } li: Hover {fond: jaune; Couleur: rouge; curseur: pointeur; } </ style> <cript> 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 = 'bloc'; pour (var i = 0; i <ali.length; i ++) {ali [i] .OnClick = function () {ClearTimeout (timer); otext.value = this.innerhtml; oul.style.display = 'Aucun'; }; }}; document.onmousedown = function (ev) {var oevent = ev || event; var Target = oevent.target || oevent.srcelement; if (target.parentNode! == oul && cible! == otext) {oul.style.display = 'Aucun'; }}; otext.onblur = function () {if (! otext.value) {otext.value = 's'il vous plaît entrez le mot-clé'; }}; }; </ script> </ head> <body> <form> <input type = "text" value = "s'il vous plaît entrez le mot-clé" id = "text" /> <input type = "Button" value = "search" /> <ul id = "ul"> <li> Renvoie si la fenêtre a été fermée </li> <li> Renvoie la hauteur de la zone d'affichage du document de la fenêtre. </li> <li> Définissez ou renvoyez le nom de la fenêtre. </li> <li> Revenez à la hauteur externe de la fenêtre. </li> </ul> </ Form> </ Body> </html>La solution rapide au problème de conflit ci-dessus d'Onclick et d'Onblur est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.