内联 JavaScript onclick 函数

Question

有没有办法像这样内联编写以下代码？

<a href="#" onClick="function(){
    //do something;
    return false;
};return false;"></a>

而不是这样做：

 <a href="#" onClick="doSomething(); return false;"></a>

 function doSomething(){
    //do something;
 }

Answer 1

您可以使用自动执行的匿名函数。此代码将起作用：

<a href="#" onClick="(function(){
    alert('Hey i am calling');
    return false;
})();return false;">click here</a>

Answer 2

这应该有效：

 <a href="#" onclick="function hi(){alert('Hi!')};hi()">click</a>

您可以在

onclick

内内联任何 JavaScript，就像通过 JavaScript 分配方法一样。我认为这只是让代码更干净，将 js 保留在脚本块中的问题

Answer 3

根据 @Mukund Kumar 给出的答案，这里有一个将事件参数传递给匿名函数的版本：

<a href="#" onClick="(function(e){
    console.log(e);
    alert('Hey i am calling');
    return false;
})(arguments[0]);return false;">click here</a>

Answer 4

这并不是真正推荐的，但你可以像这样内联完成这一切：

<a href="#" onClick="function test(){ /* Do something */  } test(); return false;"></a>

但是我想不出任何情况下这会比在其他地方编写函数并调用它更好

onClick

。

Answer 5

我知道这个线程很旧，但我今天正在寻找解决方案。当您像下面这样“内联”JavaScript 时，不要包含“function xx()”等。请参阅下面的示例。我今天测试了它，它运行完美，没有控制台错误或警告。

想分享一个解决方案：

<a href="#" type="button" onClick="var myDiv = document.getElementById('myDIV'); if (myDiv.style.display === 'block') { myDiv.style.display = 'none'; } else { myDiv.style.display = 'block'; }">click</a>