用户点击链接时执行功能的最佳方法是什么？

Question

根据我的经验，我知道当用户点击链接时执行Javascript功能的三种不同方式

1. 使用链接上的onclick属性

   <a href="#" onclick="myfunction();return false;">click me</a>
   

2. 使用链接上的href

   <a href="javascript:myfunction();">click me</a>
   

3. 请勿触摸链接，在js中执行所有操作

   <a href="#">click me</a>
   

   （在Javascript中我们将停止默认事件，并调用该函数）

哪一个更好？有哪些优点和缺点？

编辑删除了onclick

上的“javascript：”

Answer 1

使用Unobtrusive Javascript的

graceful degredation（您的第三个示例）是最佳选择。

Answer 2

在href属性中包含一个链接总是很好，以便支持在浏览器上禁用JavaScript的用户。

<a href="http://www.mywebsite.com/javascriptdisabled.html" onclick="myfunction(); return false;">click me</a>

Answer 3

以上都不是。使用click事件（如果您愿意，可以指定为属性或通过脚本分配）并使用真实URL作为后备：

<a href="realpage.html" onclick="myfunction(); return false;">click me</a>

或HTML：

<a href="realpage.html" id="myLink">click me</a>

脚本：

document.getElementById("myLink").onclick = function() {
    myfunction();
    return false;
};

此外，不要在javascript:的事件处理程序属性中添加前缀代码。这是不正确的，只是不会巧合地抛出错误（在JavaScript中，javascript:会创建一个名为javascript的标签。

Answer 4

或者，使用jQuery

$(function() {
    $('[id$=myLinkID]').click(function(e) {
        myFunction();
    });
});