为什么我的'animate”函数在 IE 中工作但在 Chrome 中不起作用：JavaScript 阴影问题？

JS 函数“Animate”在 Chrome 中失败，但在 IE 中成功：解决遮蔽问题

问题描述

带有内联函数的 onClick 事件旨在改变元素样式的名为“animate”的函数在 Chrome 中失败，但在 IE 中按预期运行。 “animate”函数中调用的代码旨在使用 JavaScript 修改元素的位置和颜色。

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

#demo {
  position: absolute;
}

<p></p>

解决方案和说明

问题在于 JavaScript 的范围链和影子机制。当使用内联事件处理程序属性（例如 onclick）时，全局函数“animate”会被最近引入的“Element.prototype.animate”方法所掩盖，该方法源于 Web 动画 API。

window.animate // global function

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

根据 DOM 规范，全局事件处理程序环境在事件处理期间隐藏元素的范围。因此，元素的 'animate' 方法优先于全局 'animate' 函数。

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).

要纠正这个问题，可以采用多种方法：

1. 重命名全局函数：

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

2. 将全局函数绑定到目标元素：

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

以上是为什么我的'animate”函数在 IE 中工作但在 Chrome 中不起作用：JavaScript 阴影问题？的详细内容。更多信息请关注PHP中文网其他相关文章！