以下是构建链接的两种方法,该链接的唯一目的是运行JavaScript代码。在功能、页面加载速度、验证目的等方面,哪个更好。?

函数myJsFunc(){警报(“myJsFunc”);}<a href=“#”onclick=“myJsFunc();”>运行JavaScript代码</a>

or

函数myJsFunc(){警报(“myJsFunc”);}运行javascript代码</a>


当前回答

我使用以下方法

<a href="javascript:;" onclick="myJsFunc();">Link</a>

相反

<a href="javascript:void(0);" onclick="myJsFunc();">Link</a>

其他回答

第一个,最好是在用户禁用JavaScript的情况下使用一个真正的链接。只需确保返回false,以防止在JavaScript执行时触发单击事件。

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

如果您使用Angular2,则此方法有效:

<a[routerLink]=“”(单击)=“passTheSalt()”>单击我</a>。

请参见此处https://stackoverflow.com/a/45465728/2803344

我认为你提出了一个错误的二分法。这不是唯一的两个选项。

我同意D4V360先生的观点,他建议,即使您使用的是锚标记,但这里并没有真正的锚。您所拥有的只是文档的一个特殊部分,其行为应该略有不同。<span>标记更合适。

您可以使用href并删除所有只有哈希值的链接:

HTML格式:

<a href="#" onclick="run_foo()"> foo </a>

JS:

$(document).ready(function(){         // on DOM ready or some other event

   $('a[href=#]').attr('href','');    // set all reference handles to blank strings
                                      //  for anchors that have only hashes

});

通常,您应该始终有一个回退链接,以确保禁用JavaScript的客户端仍然具有某些功能。这个概念被称为不引人注目的JavaScript。

实例假设您有以下搜索链接:

<a href="search.php" id="searchLink">Search</a>

您始终可以执行以下操作:

var link = document.getElementById('searchLink');

link.onclick = function() {
    try {
        // Do Stuff Here        
    } finally {
        return false;
    }
};

这样,禁用JavaScript的用户将被引导到search.php,而使用JavaScript的用户则可以查看增强的功能。

在现代网站上,如果元素只执行JavaScript功能(而不是真正的链接),则应避免使用href。

为什么?此元素的存在告诉浏览器这是一个与目的地的链接。这样,浏览器将显示“在新选项卡/窗口中打开”功能(使用shift+单击时也会触发)。这样做将导致在没有触发所需功能的情况下打开同一页面(导致用户沮丧)。

关于IE:从IE8开始,如果设置了doctype,元素样式(包括悬停)就会起作用。IE的其他版本真的不用担心了。

唯一的缺点:删除HREF将删除tabindex。为了克服这个问题,您可以使用样式为链接的按钮或使用JS添加tabindex属性。