في مشروع حديث، هناك نقطة وظيفية كهذه: يوجد مربع اختيار على الصفحة. عندما يحدد المستخدم مربع الاختيار أو يلغي تحديده، سيتم إرسال طلب jsonp إلى الخلفية. كان التنفيذ في ذلك الوقت هو إضافة حدث onchange إلى مربع الاختيار هذا، ولكن النتيجة كانت غير متوقعة، ولهذا السبب، أجريت دراسة متعمقة ووجدت أن حدث onchange واجه المشكلات التالية في أدائه ضمن IE وFF.
السؤال ①: ضمن FF، عند تغيير الحالة المحددة لمربع الاختيار، سيتم تشغيل حدث onchange على الفور. ومع ذلك، عند تغيير الحالة المحددة لمربع الاختيار ضمن IE، لن يتم تشغيل حدث onchange على الفور، وبدلاً من ذلك، سيتم تشغيل الحدث بعد أن تفقد خانة الاختيار التركيز.
لحل هذه المشكلة، أضفت عبارة this.blur() إلى حدث onclick في مربع الاختيار وذلك لأن حدث onclick يتم تنفيذه قبل حدث onchange، لذا فإن إضافة this.blur() إلى حدث Onclick يؤدي إلى ظهور مربع الاختيار. لفقد التركيز، سيتم إطلاق حدث onchange على الفور. ولكن بعد ذلك، واجهنا مشكلة ثانية.
المشكلة ②: عند استخدام حدث onclick وthis.blur في نفس الوقت، سيتم الإبلاغ عن خطأ ضمن IE.
بعد البحث عن بعض المعلومات على الإنترنت، اكتشفت أخيرًا حدث onpropertychange. لن يتم تشغيل هذا الحدث ضمن FF. ضمن IE، سيبدأ على الفور عندما تتغير حالة تحديد مربع الاختيار. لذلك، تم التوصل إلى الحل النهائي: ضمن IE، اربط حدث onpropertychange بمربع الاختيار، وتحت FF، اربط حدث onchange به.
تنفيذ التعليمات البرمجية المحددة كما يلي:
انسخ رمز الكود كما يلي:
var ua=navigator.userAgent.toLowerCase();
vars=null;
متصفح فار={
msie:(s=ua.match(/msie/s*([/d/.]+)/))?s[1]:false,
فايرفوكس:(s=ua.match(/firefox//([/d/.]+)/))?s[1]:خطأ,
الكروم:(s=ua.match(/chrome//([/d/.]+)/))?s[1]:خطأ,
الأوبرا:(s=ua.match(/opera.([/d/.]+)/))?s[1]:false,
safari:(s=ua.match(/varsion//([/d/.]+).*safari/))?s[1]:false
};
if(browser.msie){//إذا كان متصفح IE
checkbox.onpropertychange=function(){
// افعل شيئًا ما
}
}
آخر{
checkbox.onchange=function(){
// افعل شيئا
}
}