Question

鉴于以下示例代码，我想将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 ()", "")

为什么会这样？有没有更好的办法？显然我不能在没有功能部分的情况下声明该功能，那么再次删除它的重点是什么？

Answer 1

您正在使用setAttribute设置实际文本元素的属性 string ，而func又自动包装在函数中！
此外，如果它可以工作，一旦图像消失，就没有机构可以点击。

以下是您不应该使用的工作示例，仅用于解释上述声明：

这是一个函数.toString()，它被转换为字符串（并且需要一个字符串，javascript通常会自动调用function(){方法，我把它放入以清楚地显示发生了什么）。 /> 然后，为了防止引用问题（你在html和一些（在我看来，疯狂）中使用双引号，因为某些浏览器会将javascript中的单引号替换为双引号（我甚至在某些浏览器中见过一些预编译））），我天真地（因为它对这个特殊功能是安全的）将所有双引号替换为单引号。
然后，我们仍然需要移除}并追踪<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

解决方案显然是直接document.body.addEventListener('click',func,false)（正如gillesc已经评论过的那样），或者使用attachEvent（这可能与您混淆）。

请注意，为了向后兼容（特别是＆lt; IE9），您需要function addEventHandler(elem, eventType, handler) { if (elem.addEventListener) elem.addEventListener (eventType,handler,false); else if (elem.attachEvent) elem.attachEvent ('on'+eventType,handler); }，这是基本的workaround：

<appender name="UdpAppender" type="log4net.Appender.UdpAppender">
    <localPort value="8080" />
    <remoteAddress value="224.0.0.1" />
    <remotePort value="8080" />
    <layout type="log4net.Layout.PatternLayout, log4net">
        <conversionPattern value="%-5level %logger [%property{NDC}] - %message%newline" />
    </layout>
</appender>

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

1 个答案: