В поисковом ящике есть выпадающая коробка, использующая Ajax на домашней странице Sina. Нам нужно реализовать элемент щелчка в раскрывающемся поле, чтобы значение в окне поиска стало этим элементом, и раскрывающийся путь исчезает, но в то же время, когда нажимает на другие места, раскрывающийся путь также исчезнет. Как показано на рисунке:
Мы используем Онблур и Onclick, чтобы скрыть выпадающую коробку, но возникает большая проблема. Эти две функции конфликтуют. Onblur слишком мощный, и нет шансов реализовать метод OnClick. Поле поиска не может получить содержимое элемента Click. Это проблема конфликта онклик и онкола, которую мы хотим решить.
Для этой проблемы мы вводим два решения:
1. Используйте SetTimeout, чтобы задержать выполнение времени онкола, а затем выполнить онблур после выполнения OnClick. (Настройка времени SETTIMEOUT должно быть выше 100 мс, в противном случае он все еще не работает) Пример кода заключается в следующем:
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> <style> *{margin: 0; Заполнение: 0; Список стиля: нет; } form {width: 500px; Поле: 0 Авто; позиция: относительно; Увеличение: 1; } форма: после {clear: оба; содержание: ""; дисплей: блок; } .Text {float: left; Граница: 1px solid #cccccc; Лебь набивки: 14px; Ширина: 300px; Высота: 34PX; высота линии: 34px; размер шрифта: 14px; } .button {width: 50px; Высота: 34PX; Граница: 1px solid #cccccc; высота линии: 34px; размер шрифта: 14px; Цвет: #ffffff; Фон:#FF8400; } ul {position: Absolute; Верх: 36px; слева: 0; Ширина: 300px; граница правая: 1px solid #cccccc; РЕМЖА СЛЕДУ: 1PX SOLID #CCCCCC; Фон: зеленый; дисплей: нет; } li {font-size: 14px; высота линии: 34px; Высота: 34PX; Цвет:#000000; Пограничный подклад: 1PX SOLID #CCCCCC; } li: Hover {founly: желтый; Цвет: красный; курсор: указатель; } </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'; for (var i = 0; i <ali.length; i ++) {ali [i] .onclick = function () {cleartimeout (timer); otxt.value = this.innerhtml; oul.style.display = 'none'; }; }}; oText.onblur = function () {timer = settimeout (function () {oul.style.display = 'none'; if (! otxt.value) {otxt.value = 'Пожалуйста, введите ключевое слово';}}, 120); }; }; </script> </head> <body> <form> <input type = "text" value = "Пожалуйста, введите ключевое слово" id = "text"/> <input type = "cutting" value = "search"/> <ul id = "ul"> <li> вернуть, было ли окно закрыто </li> <li> Вернуть высоту зоны отображения документа </li> <li> return width of the Deciet aem. </li> <li> Установить или вернуть имя окна. </li> <li> Вернитесь к внешней высоте окна. </li> </ul> </form> </body> </html>2. Используйте Document.onmouseDown для замены Онблура для реализации скрытой функции раскрывающегося списка
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> <style> *{margin: 0; Заполнение: 0; Список стиля: нет; } form {width: 500px; Поле: 0 Авто; позиция: относительно; Увеличение: 1; } форма: после {clear: оба; содержание: ""; дисплей: блок; } .Text {float: left; Граница: 1px solid #cccccc; Лебь набивки: 14px; Ширина: 300px; Высота: 34PX; высота линии: 34px; размер шрифта: 14px; } .button {width: 50px; Высота: 34PX; Граница: 1px solid #cccccc; высота линии: 34px; размер шрифта: 14px; Цвет: #ffffff; Фон:#FF8400; } ul {position: Absolute; Верх: 36px; слева: 0; Ширина: 300px; граница правая: 1px solid #cccccc; РЕМЖА СЛЕДУ: 1PX SOLID #CCCCCC; Фон: зеленый; дисплей: нет; } li {font-size: 14px; высота линии: 34px; Высота: 34PX; Цвет:#000000; Пограничный подклад: 1PX SOLID #CCCCCC; } li: Hover {founly: желтый; Цвет: красный; курсор: указатель; } </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'; for (var i = 0; i <ali.length; i ++) {ali [i] .onclick = function () {cleartimeout (timer); otxt.value = this.innerhtml; oul.style.display = 'none'; }; }}; 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 = 'Пожалуйста, введите ключевое слово'; }}; }; </script> </head> <body> <form> <input type = "text" value = "Пожалуйста, введите ключевое слово" id = "text"/> <input type = "button" value = "search"/> <ul id = "ul"> <li> вернуть, было ли окно закрыто </li> <li> Вернуть высоту области отображения документа. </li> <li> Установить или вернуть имя окна. </li> <li> Вернитесь к внешней высоте окна. </li> </ul> </form> </body> </html>Быстрое решение проблемы конфликта Onclick и Onblur - это весь контент, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.