มีกล่องแบบเลื่อนลงโดยใช้ Ajax ในกล่องค้นหาในหน้าแรกของ Sina เราจำเป็นต้องใช้รายการคลิกในกล่องแบบเลื่อนลงเพื่อให้ค่าในช่องค้นหากลายเป็นรายการนี้และกล่องดรอปดาวน์จะหายไป แต่ในเวลาเดียวกันเมื่อคลิกที่สถานที่อื่นกล่องแบบเลื่อนลงก็จะหายไปเช่นกัน ดังแสดงในรูป:
เราใช้ Onblur และ Onclick เพื่อซ่อนกล่องดรอปดาวน์ แต่มีปัญหาที่ใหญ่กว่าเกิดขึ้น ฟังก์ชั่นทั้งสองนี้ขัดแย้งกัน Onblur มีพลังมากเกินไปและไม่มีโอกาสที่จะใช้วิธี onclick ช่องค้นหาไม่สามารถรับเนื้อหาของรายการคลิกได้ นี่คือปัญหาความขัดแย้ง onclick และ onblur ที่เราต้องการแก้ไข
สำหรับปัญหานี้เราแนะนำสองวิธี:
1. ใช้ settimeout เพื่อชะลอการดำเนินการของเวลา onblur จากนั้นดำเนินการ onblur หลังจากการดำเนินการของ onclick (การตั้งค่าเวลาของ settimeout ควรสูงกว่า 100ms มิฉะนั้นจะยังไม่ทำงาน) รหัสตัวอย่างมีดังนี้:
<! doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> <style> *{margin: 0; Padding: 0; รายการสไตล์: ไม่มี; } รูปแบบ {Width: 500px; มาร์จิ้น: 0 อัตโนมัติ; ตำแหน่ง: ญาติ; ซูม: 1; } แบบฟอร์ม: หลังจาก {clear: ทั้งสอง; เนื้อหา: ""; แสดง: บล็อก; } .Text {Float: ซ้าย; ชายแดน: 1px Solid #CCCCCC; Padding-Left: 14px; ความกว้าง: 300px; ความสูง: 34px; ความสูงของสาย: 34px; ขนาดตัวอักษร: 14px; } .button {Width: 50px; ความสูง: 34px; ชายแดน: 1px Solid #CCCCCC; ความสูงของสาย: 34px; ขนาดตัวอักษร: 14px; สี: #ffffff; ความเป็นมา:#FF8400; } ul {ตำแหน่ง: สัมบูรณ์; ด้านบน: 36px; ซ้าย: 0; ความกว้าง: 300px; ชายแดนขวา: 1px Solid #CCCCCC; ชายแดนซ้าย: 1px Solid #CCCCCC; ความเป็นมา: สีเขียว; แสดง: ไม่มี; } li {ตัวอักษรขนาด: 14px; ความสูงของสาย: 34px; ความสูง: 34px; สี:#000000; ขอบด้านล่าง: 1px Solid #CCCCCC; } li: โฮเวอร์ {พื้นหลัง: สีเหลือง; สี: สีแดง; เคอร์เซอร์: ตัวชี้; } </style> <script> window.onload = function () {var otext = document.getElementById ('text'); var oul = document.getElementById ('ul'); var Ali = oul.getElementsByTagname ('li'); ตัวจับเวลา var = null; otext.onfocus = function () {this.value = ''; oul.style.display = 'block'; สำหรับ (var i = 0; i <ali.length; i ++) {Ali [i] .onclick = function () {cleartimeout (ตัวจับเวลา); otext.value = this.innerhtml; oul.style.display = 'ไม่มี'; - - otext.onblur = function () {timer = settimeout (function () {oul.style.display = 'none'; ถ้า (! otext.value) {otext.value = 'โปรดป้อนคำหลัก';}}, 120); - - </script> </head> <body> <form> <input type = "text" value = "โปรดป้อนคำหลัก" id = "text"/> <อินพุต type = "ปุ่ม" value = "search"/> <ul id = "ul"> <li> ส่งคืนไม่ว่าหน้าต่างจะถูกปิด </li> <li> ส่งคืนความสูงของเอกสาร </li> <li> ตั้งค่าหรือส่งคืนชื่อของหน้าต่าง </li> <li> กลับไปที่ความสูงภายนอกของหน้าต่าง </li></ul> </form> </body> </html>2. ใช้ document.onmousedown เพื่อแทนที่ onblur เพื่อใช้ฟังก์ชันดรอปดาวน์ที่ซ่อนอยู่
<! doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> <style> *{margin: 0; Padding: 0; รายการสไตล์: ไม่มี; } รูปแบบ {Width: 500px; มาร์จิ้น: 0 อัตโนมัติ; ตำแหน่ง: ญาติ; ซูม: 1; } แบบฟอร์ม: หลังจาก {clear: ทั้งสอง; เนื้อหา: ""; แสดง: บล็อก; } .Text {Float: ซ้าย; ชายแดน: 1px Solid #CCCCCC; Padding-Left: 14px; ความกว้าง: 300px; ความสูง: 34px; ความสูงของสาย: 34px; ขนาดตัวอักษร: 14px; } .button {Width: 50px; ความสูง: 34px; ชายแดน: 1px Solid #CCCCCC; ความสูงของสาย: 34px; ขนาดตัวอักษร: 14px; สี: #ffffff; ความเป็นมา:#FF8400; } ul {ตำแหน่ง: สัมบูรณ์; ด้านบน: 36px; ซ้าย: 0; ความกว้าง: 300px; ชายแดนขวา: 1px Solid #CCCCCC; ชายแดนซ้าย: 1px Solid #CCCCCC; ความเป็นมา: สีเขียว; แสดง: ไม่มี; } li {ตัวอักษรขนาด: 14px; ความสูงของสาย: 34px; ความสูง: 34px; สี:#000000; ขอบด้านล่าง: 1px Solid #CCCCCC; } li: โฮเวอร์ {พื้นหลัง: สีเหลือง; สี: สีแดง; เคอร์เซอร์: ตัวชี้; } </style> <script> window.onload = function () {var otext = document.getElementById ('text'); var oul = document.getElementById ('ul'); var Ali = oul.getElementsByTagname ('li'); ตัวจับเวลา var = null; otext.onfocus = function () {this.value = ''; oul.style.display = 'block'; สำหรับ (var i = 0; i <ali.length; i ++) {Ali [i] .onclick = function () {cleartimeout (ตัวจับเวลา); otext.value = this.innerhtml; oul.style.display = 'ไม่มี'; - - document.onmousedown = function (ev) {var oevent = ev || เหตุการณ์; var target = oevent.target || oevent.srcelement; if (target.parentNode! == oul && target! == otext) {oul.style.display = 'ไม่มี'; - otext.onblur = function () {ถ้า (! otext.value) {otext.value = 'โปรดป้อนคำหลัก'; - - </script> </head> <body> <form> <input type = "text" value = "โปรดป้อนคำหลัก" id = "text"/> <อินพุต type = "ปุ่ม" value = "search"/> <ul id = "ul"> <li> ส่งคืนไม่ว่าหน้าต่างจะถูกปิด </li> <li> </li> <li> ตั้งค่าหรือส่งคืนชื่อของหน้าต่าง </li> <li> กลับไปที่ความสูงภายนอกของหน้าต่าง </li></ul> </form> </body> </html>ทางออกที่รวดเร็วสำหรับปัญหาความขัดแย้งข้างต้นของ onclick และ onblur คือเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น