名为“ animate”的JS函数在Chrome中不起作用，但在IE中起作用

Question

这行不通，什么也没发生。我如何使其工作，我在做什么错？

function animate() {

  var div = document.getElementById('demo');

  div.style.left = "200px";

  div.style.color = "red";

}


#demo {

  position: absolute;

}


<p id='demo' onclick="animate()">lolol</p>

Answer 1

问题在于，由于您使用事件处理程序的content属性，因此您的全局函数…

window.animate

被…遮盖

Element.prototype.animate

…这是最近在Web Animations中引入的：

5.21Element接口扩展

由于DOM元素可能是动画的目标，因此Element 接口[
DOM4 ]扩展如下：

 Element implements Animatable;

这允许以下类型的用法。

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

在获取事件处理程序的当前值的[步骤10]中说明了此行为：

词汇环境范围

1. 如果 H
   是元素的事件处理程序，则让 Scope 为NewObjectEnvironment（ document ， 全局环境 ）的结果。
   

否则， H 是Window对象的事件处理程序：让 Scope 为 全局环境 。

1. 如果 表单所有者 不为null，则使 Scope 为NewObjectEnvironment（ form owner ，
   Scope ）的结果。
   

2. 如果 element 不为null，则让 Scope 为NewObjectEnvironment（ element，Scope
   ）的结果。

注意： _NewObjectEnvironment（）是在ECMAScript版本5第10.2.2.3节中定义的NewObjectEnvironment（O，E）
这意味着目标元素的范围会覆盖全局范围。

因此，您可以

• 重命名您的功能

  function animate__() {
  

  var div = document.getElementById(‘demo’);

  div.style.left = “200px”;

  div.style.color = “red”;

  }

  #demo {
  

  position: absolute;

  }

  <p id='demo' onclick="animate__()">Click me</p>
  

• 使用window.animate（假设window尚未被遮盖）：

  <p id='demo' onclick="window.animate()">Click me</p>
  
  function animate() {
  

  var div = document.getElementById(‘demo’);

  div.style.left = “200px”;

  div.style.color = “red”;

  }

  #demo {
  

  position: absolute;

  }

  <p id='demo' onclick="window.animate()">Click me</p>
  

• 使用事件处理程序IDL属性代替内容属性one：

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

  var div = document.getElementById(‘demo’);

  div.style.left = “200px”;

  div.style.color = “red”;

  }

  document.getElementById(‘demo’).onclick = animate;

  #demo {
  

  position: absolute;

  }

  <p id='demo'>Click me</p>
  

• 使用事件侦听器代替事件处理程序：

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

  var div = document.getElementById(‘demo’);

  div.style.left = “200px”;

  div.style.color = “red”;

  }

  document.getElementById(‘demo’).addEventListener(‘click’, animate);

  #demo {
  

  position: absolute;

  }

  <p id='demo'>Click me</p>