為什麼我的 JavaScript `animate` 函數在 Chrome 中不起作用，但在 IE 中起作用？

JS 函數animate 在Chrome 中不起作用，但在IE 中起作用

提供的JavaScript 函數animate 在Chrome 中不起作用，但在Internet Explorer中按預期運行。為了解決這個問題，有必要深入研究使用事件處理程序內容屬性時出現的限制和潛在衝突。

問題的癥結源自於 Element.prototype 對全域函數 window.animate 的遮蔽.動畫。 Web 動畫中引入的這個新功能擴展了 Element 接口，透過以下方式直接在元素上啟用動畫：

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

使用內容屬性處理事件時，目標元素的範圍將覆蓋全域範圍。因此，您的函數名稱 animate 與新方法 Element.animate 衝突。

要解決此問題，有兩種可能的方法：

1. 重新命名您的函數：

透過更改函數名稱，可以避免與元素.原型.動畫。例如，您可以使用：

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

2. 使用apply 方法：

或者，您可以使用apply 方法明確指定動畫函數的正確範圍。如果您需要維護名稱 animate，此方法特別有用。

如下修改程式碼：

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

當全域 animate 函數觸發時，此行將正確的作用域套用至您的全域 animate 函數onclick 事件。

以上是為什麼我的 JavaScript `animate` 函數在 Chrome 中不起作用，但在 IE 中起作用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！