JS函数名为`animate`在Chrome中不起作用，但在IE中工作 [英] JS function named `animate` doesn't work in Chrome, but works in IE

问题描述

这不会工作，没有任何反应。如何让它工作，我做错了什么？

  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>  

解决方案

问题是，由于您使用事件处理程序内容属性，您的全局函数...

  window.animate 
  

...被...隐藏

  Element.prototype.animate 
  

...最近在网页动画：

5.21 元素界面的扩展

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

 元素实现Animatable; 
  

这允许以下类型的用法。

  elem.animate（{color：'red'}，2000）; 
  

此行为在步骤10 获取事件处理程序的当前值：

词法环境范围

1. 如果 H 是元素的事件处理程序，然后让范围是NewObjectEnvironment（ ，全局环境）的结果。
   
   

   否则， H 是一个 Window 对象事件处理程序：让
   范围成为全局环境。




2. 如果表单所有者不为null，则 是NewObjectEnvironment（ / em>）。

   如果元素不为null，则 是NewObjectEnvironment （元素，范围）。

注意：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 __（）>点击我< / p>  

  $ b

• 使用 window.animate （假设窗口未隐藏）：

   < p id ='demo'onclick =window.animate（）& / 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（）>点击我< / p>  

  
  

• 使用活动处理程序IDL属性而不是内容属性一：

    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'>点击我< / 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'>点击我< / p>  

  >

This won't work, nothing happens. How do I make it work, what am I doing wrong?

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>

解决方案

The problem is that, since you use an event handler content attribute, your global function...

window.animate

...is shadowed by...

Element.prototype.animate

...which was introduced recently in Web Animations:

5.21 Extensions to the Element interface

Since DOM Elements may be the target of an animation, the Element interface [DOM4] is extended as follows:

Element implements Animatable;

This allows the following kind of usage.

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

This behavior is explained in step 10 of getting the current value of the event handler:

Lexical Environment Scope

1. If H is an element's event handler, then let Scope be the result of NewObjectEnvironment(document, the global environment).

   Otherwise, H is a Window object's event handler: let Scope be the global environment.

2. If form owner is not null, let Scope be the result of NewObjectEnvironment(form owner, Scope).

3. If element is not null, let Scope be the result of NewObjectEnvironment(element, Scope).

Note: NewObjectEnvironment() is defined in ECMAScript edition 5 section 10.2.2.3 NewObjectEnvironment (O, E)

That means that the scope of the target element shadows the global scope.

Therefore, you can

• Rename your function

  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>

• Use window.animate (assuming window has not been shadowed):

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

• Use an event handler IDL attribute instead of a content attribute 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>

• Use an event listener instead of an event handler:

  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>

这篇关于JS函数名为`animate`在Chrome中不起作用，但在IE中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！