Mengapakah Fungsi `menghidupkan` JavaScript Saya Tidak Berfungsi dalam Chrome, Tetapi Berfungsi dalam IE?

JS Function animate Tidak Berfungsi dalam Chrome, tetapi Berfungsi dalam IE

Fungsi JavaScript yang disediakan animate tidak berfungsi dalam Chrome tetapi beroperasi seperti yang diharapkan dalam Internet Explorer . Untuk menangani isu ini, adalah perlu untuk menyelidiki kekangan dan kemungkinan konflik yang timbul apabila menggunakan atribut kandungan pengendali acara.

Inti masalah ini berpunca daripada pembayangan tetingkap fungsi global anda.animate oleh Element.prototype .bernyawa. Fungsi baharu ini, yang diperkenalkan dalam Animasi Web, memanjangkan antara muka Elemen, mendayakan animasi terus pada elemen dengan cara berikut:

elem.animate({ color: 'red' }, 2000);

Apabila mengendalikan acara menggunakan atribut kandungan, skop elemen sasaran mengatasi skop global . Oleh itu, nama fungsi anda animate bercanggah dengan kaedah baharu Element.animate.

Untuk menyelesaikan isu ini, terdapat dua pendekatan yang mungkin:

1. Namakan semula Fungsi Anda:

Dengan menukar nama fungsi anda, anda boleh mengelakkan konflik dengan Element.prototype.animate. Sebagai contoh, anda boleh menggunakan:

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

2. Gunakan Kaedah memohon:

Sebagai alternatif, anda boleh menggunakan kaedah guna untuk menentukan secara eksplisit skop yang betul untuk fungsi animasi anda. Pendekatan ini amat berguna jika anda perlu mengekalkan nama animasi.

Ubah suai kod anda seperti berikut:

document.getElementById('demo').onclick = function() {
  animate.apply(document.getElementById('demo'));
};

Baris ini menggunakan skop yang betul pada fungsi animasi global anda apabila ia dicetuskan oleh acara onclick.

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