Ada kotak drop-down menggunakan Ajax di kotak pencarian di beranda Sina. Kita perlu menerapkan item klik di kotak drop-down untuk membuat nilai di kotak pencarian menjadi item ini, dan kotak drop-down menghilang, tetapi pada saat yang sama, ketika mengklik di tempat lain, kotak drop-down juga akan menghilang. Seperti yang ditunjukkan pada gambar:
Kami menggunakan Onblur dan Onclick untuk menyembunyikan kotak drop-down, tetapi masalah yang lebih besar muncul. Dua fungsi ini bertentangan. Onblur terlalu kuat dan tidak ada kesempatan untuk mengimplementasikan metode OnClick. Kotak pencarian tidak bisa mendapatkan konten item klik. Ini adalah masalah konflik OnClick dan Onblur yang ingin kami selesaikan.
Untuk masalah ini, kami memperkenalkan dua solusi:
1. Gunakan SetTimeout untuk menunda eksekusi waktu Onblur, dan kemudian jalankan Onblur setelah eksekusi OnClick. (Pengaturan waktu SetTimeout harus di atas 100 ms, jika tidak, itu masih tidak berfungsi) Kode contoh adalah sebagai berikut:
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <itement> </iteme> <tyle> *{margin: 0; Padding: 0; List-style: tidak ada; } form {width: 500px; margin: 0 otomatis; Posisi: kerabat; Zoom: 1; } form: setelah {clear: keduanya; isi: ""; Tampilan: Blok; } .text {float: left; Perbatasan: 1px solid #cccccc; Padding-left: 14px; Lebar: 300px; Tinggi: 34px; Line-Height: 34px; Ukuran font: 14px; } .button {width: 50px; Tinggi: 34px; Perbatasan: 1px solid #cccccc; Line-Height: 34px; Ukuran font: 14px; Warna: #FFFFFF; Latar Belakang:#FF8400; } ul {position: absolute; Atas: 36px; Kiri: 0; Lebar: 300px; Border-Right: 1px solid #CCCCCC; Border-left: 1px solid #cccccc; Latar Belakang: Hijau; Tampilan: Tidak Ada; } li {font-size: 14px; Line-Height: 34px; Tinggi: 34px; Warna:#000000; Border-Bottom: 1px solid #CCCCCC; } li: hover {latar belakang: kuning; Warna: Merah; kursor: pointer; } </tyle> <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'; untuk (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 = 'Harap masukkan kata kunci';}}, 120); }; }; </script> </head> <body> <orm> <input type = "text" value = "Harap masukkan kata kunci" id = "text"/> <input type = "tombol" value = "cari"/> <ul id = "ul"> <li> Kembalikan apakah jendela telah ditutup </li> Kembalikan ketinggian dokumen area tampilan dokumen dari jendela </Li> <Li> The Well. </li> <li> Tetapkan atau kembalikan nama jendela. </li> <li> Kembali ke ketinggian eksternal jendela. </li> </ul> </form> </body> </html>2. Gunakan dokumen.
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <itement> </iteme> <tyle> *{margin: 0; Padding: 0; List-style: tidak ada; } form {width: 500px; margin: 0 otomatis; Posisi: kerabat; Zoom: 1; } form: setelah {clear: keduanya; isi: ""; Tampilan: Blok; } .text {float: left; Perbatasan: 1px solid #cccccc; Padding-left: 14px; Lebar: 300px; Tinggi: 34px; Line-Height: 34px; Ukuran font: 14px; } .button {width: 50px; Tinggi: 34px; Perbatasan: 1px solid #cccccc; Line-Height: 34px; Ukuran font: 14px; Warna: #FFFFFF; Latar Belakang:#FF8400; } ul {position: absolute; Atas: 36px; Kiri: 0; Lebar: 300px; Border-Right: 1px solid #CCCCCC; Border-left: 1px solid #cccccc; Latar Belakang: Hijau; Tampilan: Tidak Ada; } li {font-size: 14px; Line-Height: 34px; Tinggi: 34px; Warna:#000000; Border-Bottom: 1px solid #CCCCCC; } li: hover {latar belakang: kuning; Warna: Merah; kursor: pointer; } </tyle> <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'; untuk (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 || 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 = 'Harap masukkan kata kunci'; }}; }; </script> </head> <body> <sorm> <input type = "text" value = "Harap masukkan kata kunci" id = "text"/> <input type = "Tombol" value = "cari"/> <ul id = "ul"> <li> Kembalikan apakah jendela telah ditutup </li> <li> Kembalikan ketinggian dokumen area display dokumen Area Window </Li> <Li> <Li> <Li> Kembalinya. </li> <li> Tetapkan atau kembalikan nama jendela. </li> <li> Kembali ke ketinggian eksternal jendela. </li> </ul> </form> </body> </html>Solusi cepat untuk masalah konflik di atas OnClick dan Onblur adalah semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.