将onclick事件设置为自定义函数会导致语法错误

Setting the onclick event to a custom function results in syntax error

本文关键字：语法 错误 自定义函数 onclick 事件 设置      更新时间：2023-09-26

给定以下示例代码，我想将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 (

)

如果我取函数的字符串并删除函数部分，脚本将按预期工作:

func = func.toString();
func = func.replace("function ()", "")

为什么会这样?有没有更好的办法?显然，如果没有函数部分，我就不能声明函数，那么再次删除它又有什么意义呢?

您正在使用setAttribute设置实际的文本元素的属性字符串，它反过来被自动包装在一个函数中!
此外，如果它会工作，就没有身体点击一旦图像消失了。

这是一个工作示例你不应该使用，只是为了解释上面的语句:

这是一个转换为字符串的函数func(在期望字符串的地方，javascript通常会自动调用.toString()方法，我把它放进去清楚地显示发生了什么)。
然后，为了防止引号问题(你在html中使用了双引号，出于一些(在我看来，疯狂的)原因，一些浏览器将javascript中的单引号替换为双引号(我甚至在一些浏览器中看到了一些预编译)，我天真地(因为它对这个特定的函数是安全的)将所有双引号替换为单引号。
然后我们仍然需要删除function(){和后面的}。
现在我们到达了可以传递的string函数。
最后，浏览器设置实际的文本属性，并将代码再次包装在函数中，以便它能够工作。

<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，这是一个基本的解决方案:>

function addEventHandler(elem, eventType, handler) {
 if (elem.addEventListener)
     elem.addEventListener (eventType,handler,false);
 else if (elem.attachEvent)
     elem.attachEvent ('on'+eventType,handler); 
}
相关文章：