Mengapa Fungsi `menghidupkan` Saya Berfungsi dalam IE Tetapi Bukan Chrome: Isu Bayangan JavaScript?

<p>

Fungsi JS 'Animate' Gagal dalam Chrome Tetapi Berjaya dalam IE: Menyelesaikan Isu Bayangan

Penerangan Masalah

<p>Acara onClick dengan fungsi sebaris dinamakan 'animate' yang direka untuk mengubah gaya elemen gagal dalam Chrome tetapi berfungsi seperti yang dimaksudkan dalam IE. Kod yang digunakan dalam fungsi 'animate' bertujuan untuk mengubah suai kedudukan dan warna elemen menggunakan JavaScript.

function animate() {
  var div = document.getElementById('demo');
  div.style.left = "200px";
  div.style.color = "red";
}

#demo {
  position: absolute;
}

<p>

Penyelesaian dan Penjelasan

<p>Masalahnya terletak pada skop JavaScript rantai dan mekanisme pembayang. Apabila atribut pengendali acara sebaris (cth., onclick) digunakan, fungsi global 'animate' menjadi dikaburkan oleh kaedah 'Element.prototype.animate' yang diperkenalkan baru-baru ini, yang berpunca daripada API Animasi Web.

window.animate // global function

Element.prototype.animate // element's own method

<p>Mengikut spesifikasi DOM, persekitaran pengendali acara global membayangi skop elemen semasa pengendalian acara. Oleh itu, kaedah 'bernyawa' bagi unsur tersebut diutamakan daripada fungsi 'bernyawa' global.

10. Let the current event handler value be the result of the following steps:
    ...
    4. Let the target environment be the lexical environment scope.
    ...
    6. If the element is non-null, then
        a. Let the target environment be the result of NewObjectEnvironment(the element, the target environment).

<p>Untuk membetulkannya, seseorang boleh menggunakan beberapa pendekatan:

1. Namakan semula fungsi global:

function animate__() {
  var div = document.getElementById('demo');
  div.style.left = "200px";
  div.style.color = "red";
}

2. Ikat fungsi global pada sasaran elemen:

document.getElementById('demo').addEventListener('click', animate.bind(document.getElementById('demo')));

Atas ialah kandungan terperinci Mengapa Fungsi `menghidupkan` Saya Berfungsi dalam IE Tetapi Bukan Chrome: Isu Bayangan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!