Dans un projet récent, il existe un tel point fonctionnel : il y a une case à cocher sur la page. Lorsque l'utilisateur coche ou décoche la case, une requête jsonp sera envoyée en arrière-plan. L'implémentation à cette époque consistait à ajouter un événement onchange à cette case à cocher, mais le résultat était inattendu. Pour cette raison, j'ai mené une étude approfondie et j'ai découvert que l'événement onchange présentait les problèmes suivants dans ses performances sous IE et FF.
Question ① : Sous FF, lorsque l'état sélectionné de la case à cocher est modifié, l'événement onchange sera déclenché immédiatement. Cependant, lors de la modification de l'état sélectionné de la case à cocher sous IE, l'événement onchange ne sera pas déclenché immédiatement. Au lieu de cela, l'événement sera déclenché une fois que la case à cocher perdra le focus.
Afin de résoudre ce problème, j'ai ajouté l'instruction this.blur() à l'événement onclick de la case à cocher. En effet, l'événement onclick est exécuté avant l'événement onchange, donc l'ajout de this.blur() à l'événement Onclick provoque la case à cocher. perdre Le focus déclenchera immédiatement l'événement onchange. Mais ensuite, nous avons rencontré un deuxième problème.
Problème ② : Lorsque l'événement onclick et this.blur sont utilisés en même temps, une erreur sera signalée sous IE.
Après avoir cherché quelques informations sur Internet, j'ai finalement découvert l'événement onpropertychange. Cet événement ne sera pas déclenché sous FF. Sous IE, il démarre immédiatement lorsque l'état de sélection de la case à cocher change. Ainsi, la solution finale a été trouvée : sous IE, liez l'événement onpropertychange à la case à cocher, et sous FF, liez-y l'événement onchange.
L'implémentation spécifique du code est la suivante :
Copiez le code comme suit :
var ua=navigator.userAgent.toLowerCase();
vars = nul ;
var navigateur={
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){//S'il s'agit d'un navigateur IE
checkbox.onpropertychange=fonction(){
//faire quelque chose
}
}
autre{
checkbox.onchange=fonction(){
//faire quelque chose
}
}