ในโปรเจ็กต์ล่าสุด มีจุดทำงานดังกล่าว: มีช่องทำเครื่องหมายบนเพจ เมื่อผู้ใช้เลือกหรือยกเลิกการเลือกช่องทำเครื่องหมาย คำขอ jsonp จะถูกส่งไปยังพื้นหลัง การใช้งานในขณะนั้นคือการเพิ่มเหตุการณ์ onchange ลงในช่องทำเครื่องหมายนี้ แต่ผลลัพธ์ที่ได้กลับเป็นสิ่งที่ไม่คาดคิด ด้วยเหตุนี้ ฉันจึงทำการศึกษาเชิงลึกและพบว่าเหตุการณ์ onchange มีปัญหาต่อไปนี้ในประสิทธิภาพการทำงานภายใต้ IE และ FF
คำถามที่ 1: ภายใต้ FF เมื่อสถานะที่เลือกของช่องทำเครื่องหมายมีการเปลี่ยนแปลง เหตุการณ์ onchange จะถูกทริกเกอร์ทันที อย่างไรก็ตาม เมื่อเปลี่ยนสถานะที่เลือกของช่องทำเครื่องหมายภายใต้ IE เหตุการณ์ onchange จะไม่ถูกทริกเกอร์ทันที แต่เหตุการณ์จะถูกทริกเกอร์หลังจากที่ช่องทำเครื่องหมายสูญเสียโฟกัส
เพื่อที่จะแก้ไขปัญหานี้ ฉันจึงได้เพิ่มคำสั่ง this.blur() ลงในเหตุการณ์ onclick ของช่องทำเครื่องหมาย เนื่องจากเหตุการณ์ onclick จะถูกดำเนินการก่อนเหตุการณ์ onchange ดังนั้นการเพิ่ม this.blur() ลงในเหตุการณ์ Onclick จะทำให้ช่องทำเครื่องหมาย ที่จะสูญเสีย โฟกัสจะยิงเหตุการณ์ onchange ทันที แต่แล้วเราก็พบปัญหาที่สอง
ปัญหาที่ 2: เมื่อใช้เหตุการณ์ onclick และ this.blur พร้อมกัน ข้อผิดพลาดจะถูกรายงานภายใต้ IE
หลังจากค้นหาข้อมูลบางอย่างบนอินเทอร์เน็ต ในที่สุดฉันก็ค้นพบเหตุการณ์ onpropertychange เหตุการณ์นี้จะไม่ถูกทริกเกอร์ภายใต้ FF ภายใต้ IE จะเริ่มทันทีเมื่อสถานะการเลือกของช่องทำเครื่องหมายเปลี่ยนไป ดังนั้นจึงมาถึงวิธีแก้ปัญหาขั้นสุดท้าย: ภายใต้ IE ให้ผูกเหตุการณ์ onpropertychange กับช่องทำเครื่องหมาย และภายใต้ FF ให้ผูกเหตุการณ์ onchange เข้ากับเหตุการณ์นั้น
การใช้งานโค้ดเฉพาะมีดังนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
var ua=navigator.userAgent.toLowerCase();
vars=null;
เบราว์เซอร์ var={
msie:(s=ua.match(/msie/s*([/d/.]+)/))?s[1]:false,
firefox:(s=ua.match(/firefox//([/d/.]+)/))?s[1]:false,
โครเมียม:(s=ua.match(/chrome//([/d/.]+)/))?s[1]:false,
โอเปร่า:(s=ua.match(/opera.([/d/.]+)/))?s[1]:false,
ซาฟารี:(s=ua.match(/varsion//([/d/.]+).*safari/))?s[1]:false
-
if(browser.msie){//หากเป็นเบราว์เซอร์ IE
ช่องทำเครื่องหมาย.onpropertychange=function(){
//ทำอะไรสักอย่าง
-
-
อื่น{
ช่องทำเครื่องหมาย.onchange=function(){
//ทำอะไรสักอย่าง
-
-