Maison >interface Web >js tutoriel >Pourquoi mon écouteur d'événements « onClick » ne fonctionne-t-il pas dans IE8 et comment puis-je y remédier ?

Pourquoi mon écouteur d'événements « onClick » ne fonctionne-t-il pas dans IE8 et comment puis-je y remédier ?

Patricia Arquette
Patricia Arquetteoriginal
2024-11-28 08:44:14637parcourir

Why Doesn't My `onClick` Event Listener Work in IE8, and How Can I Fix It?

Problème de compatibilité de l'écouteur d'événement onClick IE8

Problème :
Dans le code fourni, l'écouteur d'événement JavaScript car l'élément li ne fonctionne pas dans IE8 navigateur.

Solution :

IE8 ne dispose pas de la méthode addEventListener, une solution alternative de gestion des événements entre navigateurs est donc requise. Le code suivant fournit un polyfill pour addEventListener qui fonctionne dans les navigateurs standard et existants :

var hookEvent = (function() {
    var div;

    // Standard-compliant browsers
    function standardHookEvent(element, eventName, handler) {
        element.addEventListener(eventName, handler, false);
        return element;
    }

    // Legacy IE browsers
    function oldIEHookEvent(element, eventName, handler) {
        element.attachEvent("on" + eventName, function(e) {
            e = e || window.event;
            e.preventDefault = oldIEPreventDefault;
            e.stopPropagation = oldIEStopPropagation;
            handler.call(element, e);
        });
        return element;
    }

    function oldIEPreventDefault() {
        this.returnValue = false;
    }

    function oldIEStopPropagation() {
        this.cancelBubble = true;
    }

    div = document.createElement('div');
    if (div.addEventListener) {
        div = undefined;
        return standardHookEvent;
    }
    if (div.attachEvent) {
        div = undefined;
        return oldIEHookEvent;
    }
    throw "Neither modern event mechanism (addEventListener nor attachEvent) is supported by this browser.";
})();

Utilisation :
Dans le code fourni, remplacez getElementById().addEventListener( ) appelle avec :

hookEvent(document.getElementById("hd_vertical"), "click", function(e) {
   // ...
});

Supplémentaire Remarques :

  • IE8 ne prend pas non plus en charge getElementsByClassName. Utilisez plutôt querySelectorAll.
  • Le polyfill fourni normalise certaines propriétés d'événement mais pas toutes. Pensez à utiliser une bibliothèque comme jQuery pour une gestion complète des événements.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn