Dalam proyek terbaru, ada poin fungsional: ada kotak centang di halaman. Ketika pengguna memilih atau membatalkan pilihan kotak centang, permintaan jsonp akan dikirim ke latar belakang. Implementasinya saat itu adalah menambahkan event onchange ke kotak centang ini, namun hasilnya tidak terduga. Oleh karena itu, saya melakukan kajian mendalam dan menemukan bahwa event onchange memiliki permasalahan berikut pada performanya di IE dan FF.
Pertanyaan ①: Di bawah FF, ketika status kotak centang yang dipilih diubah, acara onchange akan segera dipicu. Namun, ketika mengubah status kotak centang yang dipilih pada IE, peristiwa onchange tidak akan langsung terpicu. Sebaliknya, peristiwa tersebut akan terpicu setelah kotak centang kehilangan fokus.
Untuk mengatasi masalah ini, saya menambahkan pernyataan this.blur() ke event onclick pada kotak centang. Ini karena event onclick dijalankan sebelum event onchange, jadi menambahkan this.blur() ke event Onclick akan menyebabkan kotak centang. kehilangan Fokus akan segera mengaktifkan acara onchange. Namun kemudian, kami menemui masalah kedua.
Masalah ②: Ketika event onclick dan this.blur digunakan secara bersamaan, kesalahan akan dilaporkan pada IE.
Setelah mencari beberapa informasi di Internet, akhirnya saya menemukan event onpropertychange. Acara ini tidak akan dipicu di FF. Di bawah IE, ini akan segera dimulai ketika status pemilihan kotak centang berubah. Jadi, solusi akhir tercapai: di bawah IE, ikat acara onpropertychange ke kotak centang, dan di bawah FF, ikat acara onchange ke kotak centang tersebut.
Implementasi kode spesifiknya adalah sebagai berikut:
Copy kode kodenya sebagai berikut:
var ua=navigator.userAgent.toLowerCase();
vars=nol;
var peramban={
msie:(s=ua.match(/msie/s*([/d/.]+)/))?s[1]:false,
firefox:(s=ua.match(/firefox//([/d/.]+)/))?s[1]:false,
chrome:(s=ua.match(/chrome//([/d/.]+)/))?s[1]:false,
opera:(s=ua.match(/opera.([/d/.]+)/))?s[1]:false,
safari:(s=ua.match(/varsion//([/d/.]+).*safari/))?s[1]:false
};
if(browser.msie){//Jika itu adalah browser IE
checkbox.onpropertychange=fungsi(){
//melakukan sesuatu
}
}
kalau tidak{
checkbox.onchange=fungsi(){
//melakukan sesuatu
}
}