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 获取事件处理程序的当前值:
词法环境范围
如果 H 是元素的事件处理程序,然后让范围是NewObjectEnvironment( ,全局环境)的结果。
如果表单所有者不为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
interfaceSince 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
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.If form owner is not null, let Scope be the result of NewObjectEnvironment(form owner, Scope).
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
(assumingwindow
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屋!
查看全文