In einem aktuellen Projekt gibt es einen solchen Funktionspunkt: Es gibt ein Kontrollkästchen auf der Seite. Wenn der Benutzer das Kontrollkästchen aktiviert oder deaktiviert, wird eine JSONP-Anfrage an den Hintergrund gesendet. Die damalige Implementierung bestand darin, diesem Kontrollkästchen ein Onchange-Ereignis hinzuzufügen, das Ergebnis war jedoch unerwartet. Aus diesem Grund habe ich eine eingehende Untersuchung durchgeführt und festgestellt, dass das Onchange-Ereignis unter IE und FF die folgenden Probleme in seiner Leistung aufwies.
Frage ①: Unter FF wird das Onchange-Ereignis sofort ausgelöst, wenn der ausgewählte Status des Kontrollkästchens geändert wird. Wenn Sie jedoch den ausgewählten Status des Kontrollkästchens im IE ändern, wird das Ereignis „onchange“ nicht sofort ausgelöst, sondern erst, nachdem das Kontrollkästchen den Fokus verliert.
Um dieses Problem zu lösen, habe ich die Anweisung this.blur() zum onclick-Ereignis des Kontrollkästchens hinzugefügt. Dies liegt daran, dass das onclick-Ereignis vor dem onchange-Ereignis ausgeführt wird, sodass das Hinzufügen von this.blur() zum Onclick-Ereignis das Kontrollkästchen verursacht verlieren Der Fokus löst sofort das Onchange-Ereignis aus. Doch dann stießen wir auf ein zweites Problem.
Problem ②: Wenn das Onclick-Ereignis und this.blur gleichzeitig verwendet werden, wird im IE ein Fehler gemeldet.
Nachdem ich im Internet nach Informationen gesucht hatte, entdeckte ich schließlich die Veranstaltung onpropertychange. Dieses Ereignis wird unter FF nicht ausgelöst. Unter IE wird es sofort gestartet, wenn sich der Auswahlstatus des Kontrollkästchens ändert. Damit wurde die endgültige Lösung erreicht: Binden Sie unter IE das Ereignis „onpropertychange“ an das Kontrollkästchen und unter FF das Ereignis „onchange“ daran.
Die spezifische Code-Implementierung lautet wie folgt:
Kopieren Sie den Codecode wie folgt:
var ua=navigator.userAgent.toLowerCase();
vars=null;
var browser={
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){//Wenn es sich um einen IE-Browser handelt
checkbox.onpropertychange=function(){
//etwas tun
}
}
anders{
checkbox.onchange=function(){
//etwas tun
}
}