为什么我的 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中文网其他相关文章！