单击链接时执行JavaScript

Question

哪个更好，假设我们不关心没有启用JavaScript的人？

<a href="#" onclick="executeSomething(); return false"></a>

要么

<a href="javascript:executeSomething()"></a>

有什么区别吗？

或者除了使用JavaScript库将事件附加到锚元素之外还有其他任何方法吗？

Answer 1

关于onclick的好处是你可以通过javascript禁用优雅地处理浏览器。

例如，无论是否在浏览器中启用了javascript，下面的照片链接都会有效：

<a href="http://www.example.com/myPhoto.jpg" target="_blank" onclick="showPhoto(this.href); return false;">foobar</a>

Answer 2

最好使用onclick因为这就是事情的方式。

javascript:是一种模仿onclick的hackish方式。

另外，我建议你尽可能地做一些非侵入性的Javascript，它使代码更容易阅读和更易于 维护 ！

Answer 3

href="#"有许多不良副作用，例如在浏览器页脚中显示＃作为目标网址，如果用户禁用了javascript，则会在点击链接时在其网址末尾添加＃。

恕我直言的最佳方法是将处理程序附加到代码中的链接，而不是HTML中。

var e = document.getElementById("#myLink");
e.onclick = executeSomething;

Answer 4

这基本上是您想要遵循的模式：

• 编写HTML标记
• 从JavaScript附加事件处理程序

这是一种方式：

<a id="link1" href="#">Something</a>

<script type="text/javascript">
// get a reference to the A element
var link1 = document.getElementById("link1");

// attach event
link1.onclick = function(e) { return myHandler(e); };

// your handler
function myHandler(e) {
    // do whatever

    // prevent execution of the a href
    return false;
}
</script>

其他人提到了jQuery，它更强大，跨浏览器兼容。

Answer 5

最佳做法是将您的javascript与标记完全分开。 这是使用jQuery的一个例子。

 <script type="text/javascript">
     $(function() {
         $('a#someLink').click( function() {
              doSomething();
              return false;
         });
     });
 </script>

 ...

 <a href="#" id="someLink">some text</a>

Answer 6

是的，我同意使用onclick并将href完全从锚标签中删除...不知道你喜欢做什么但我喜欢在函数内部保留'return false'语句。

Answer 7

主要区别在于：

1. 默认情况下，浏览器假设href属性是一个字符串（目标url）
2. 浏览器知道在onclick属性中这是一些javascript

这就是为什么有些人通过<a href="javascript: ... ;">...</a>向浏览器指定“嘿，当您阅读此超链接的href属性时解释javascript”

要回答这个问题，那就是区别！

OTOH使用javascript事件时的最佳做法是另一个故事，但大多数观点都是由其他人在这里做出的！

谢谢