鉴于以下示例代码，我想将 onclick 事件设置为我在同一方法中声明的函数(全局范围内没有函数):
<HTML>
<HEAD>
<Title>Title</Title>
</HEAD>
<body>
<img id="img" class="std" src="http://www.free-animated-pictures.com/bug_crawls_on_screen.gif"/>
<script type='text/javascript'>
var i = document.getElementById("img");
var func = function(){
var i = document.getElementById("img");
if(i.className === "std"){
i.className = "hid";
i.style.display = "none";
}
else if(i.className === "hid"){
i.className = "std";
i.style.display = "block";
}
};
//func = func.toString();
//func = func.replace("function ()", "")
document.body.setAttribute("onclick", func);
</script>
</body>
</HTML>
如果我按原样使用代码，则在事件触发时只会收到以下错误:
Uncaught SyntaxError: Unexpected token (
如果我获取函数的字符串并删除其中的 function 部分，则脚本将按预期工作:
func = func.toString();
func = func.replace("function ()", "")
为什么会这样呢？有没有更好的办法？显然我无法声明没有 function 部分的函数，那么再次删除它有什么意义呢？
最佳答案
您使用 setAttribute 设置实际文本元素的属性 string，该属性又自动包装在函数中!
另外，如果它有效的话，一旦图像消失，就不会再有任何可以点击的物体了。
这是一个工作示例您不应该使用，只是为了解释上述声明:
这里有一个函数func，它被转换为字符串(在需要字符串的地方，javascript通常会自动调用.toString()方法，我把它放在清楚地显示发生了什么)。
然后，为了防止引用问题(您在 html 中使用了双引号，并且出于某些(在我看来，疯狂的)原因，某些浏览器将 javascript 中的单引号替换为双引号(我什至亲眼目睹了某些浏览器中的一些预编译) ))，我天真(因为对于这个特定函数来说是安全的)将所有双引号替换为单引号。
然后我们仍然需要删除 function(){ 和尾随的 }。
现在我们到达了函数字符串，我们可以传递它。
最后，浏览器设置实际的文本属性并将代码再次包装在函数内，以便其正常工作。
<img id="img" class="std" src="http://www.free-animated-pictures.com/bug_crawls_on_screen.gif" />
intentional text filler, otherwise body shrinks to 0*0 px leaving nothing to click on...
<script type='text/javascript'>
var func = function(){
var i = document.getElementById('img');
if(i.className === 'std'){
i.className = 'hid';
i.style.display = 'none';
}
else if(i.className === 'hid'){
i.className = 'std';
i.style.display = 'block';
}
};
document.body.setAttribute( 'onclick'
, func.toString()
.replace(/\"/g,'\'')
.replace(/^function *\( *\) *{/,'')
.replace(/} *$/,'')
);
</script>解决方案显然是直接document.body.onclick=func(正如gillesc已经评论的那样)，或者使用document.body.addEventListener('click' ,func,false) (这可能是您感到困惑的)。
请注意，为了向后兼容(尤其是 < IE9)，您需要 attachEvent，这是一个基本的 workaround :
function addEventHandler(elem, eventType, handler) {
if (elem.addEventListener)
elem.addEventListener (eventType,handler,false);
else if (elem.attachEvent)
elem.attachEvent ('on'+eventType,handler);
}
关于javascript - 将 onclick 事件设置为自定义函数会导致语法错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30248735/