Mengapa Acara `onclick` JS `li` Tag Saya Tidak Berfungsi dalam IE8 dan Bagaimana Saya Boleh Membetulkannya?

JS li Tag Onclick Event Tidak Berfungsi dalam IE8

Isu yang dilaporkan dengan acara li onclick yang gagal berfungsi dalam pelayar IE8 berpunca daripada fakta bahawa IE8 tidak menyokong kaedah addEventListener. Untuk menangani perkara ini, kita perlu menggunakan pendahulunya yang tidak standard, attachEvent.

Melaksanakan attachEvent Hook

Fungsi hookEvent berikut boleh digunakan untuk mengendalikan acara dalam kedua-dua penyemak imbas yang mematuhi standard dan pelayar yang mempunyai khusus Microsoft sebelumnya mekanisme:

var hookEvent = (function() {
    var div;

    function standardHookEvent(element, eventName, handler) {
        element.addEventListener(eventName, handler, false);
        return element;
    }

    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.";
})();

Mengintegrasikan Cangkuk ke dalam Pengendalian Acara

Untuk menggunakan cangkuk ini dalam contoh yang disediakan, kami menggantikan baris addEventListener dengan:

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

Pertimbangan Tambahan

IE8 juga tidak mempunyai sokongan untuk getElementsByClassName. Untuk mengimbangi, kami boleh menggunakan querySelectorAll atau querySelector sebaliknya:

var _url = document.querySelectorAll("." + id)[1].getAttribute('href'); // Grabs the second matching element
var _url = document.querySelector("." + id).getAttribute('href'); // Grabs the first matching element

Dengan memanfaatkan fungsi hookEvent dan menangani isu keserasian penyemak imbas IE8 tambahan ini, acara li onclick kini seharusnya berfungsi seperti yang diharapkan.

Atas ialah kandungan terperinci Mengapa Acara `onclick` JS `li` Tag Saya Tidak Berfungsi dalam IE8 dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!