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

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

or

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


当前回答

为什么不使用这个?这不会向上滚动页面。

<span role="button" onclick="myJsFunc();">Run JavaScript Code</span>

其他回答

肯定hash(#)更好,因为在JavaScript中它是一个伪方案:

污染历史实例化引擎的新副本在全局范围内运行,不尊重事件系统。

当然,使用onclick处理程序防止默认操作的“#”更好。此外,唯一目的是运行JavaScript的链接并不是真正的“链接”,除非当出现问题时,您将用户发送到页面上某个合理的锚点(只需#将发送到顶部)。您可以简单地使用样式表模拟链接的外观,而完全不用考虑href。

此外,关于牛神的建议,特别是:。。。href=“javascript_required.html”onclick=“…这是一种很好的方法,但它没有区分“禁用javascript”和“onclick失败”场景。

我个人将它们结合使用。例如:

HTML

<a href="#">Link</a>

使用一点jQuery

$('a[href="#"]').attr('href','javascript:void(0);');

or

$('a[href="#"]').click(function(e) {
   e.preventDefault();
});

但我使用它只是为了防止用户单击空锚点时页面跳到顶部。我很少在HTML中直接使用onClick和其他on事件。

我的建议是将<span>元素与class属性一起使用,而不是锚。例如:

<span class="link">Link</span>

然后将函数分配给.link,其中包含一个封装在body中的脚本,该脚本位于</body>标记之前或外部JavaScript文档中。

<script>
    (function($) {
        $('.link').click(function() {
            // do something
        });
    })(jQuery);
</script>

*注意:对于动态创建的元素,请使用:

$('.link').on('click', function() {
    // do something
});

对于使用动态创建元素创建的动态创建元素,请使用:

$(document).on('click','.link', function() {
    // do something
});

然后,您可以将span元素设置为看起来像带有一点CSS的锚点:

.link {
    color: #0000ee;
    text-decoration: underline;
    cursor: pointer;
}
.link:active {
    color: red;
}

下面是上面提到的jsFiddle示例。

我将href=“#”用于我希望为其设置虚拟行为的链接。然后我使用以下代码:

$(document).ready(function() {
    $("a[href='#']").click(function(event) {
        event.preventDefault();
    });
});

这意味着,如果href等于哈希(*=“#”),它将阻止默认链接行为,因此仍允许您为其编写功能,并且不会影响锚点单击。

我强烈希望尽可能将JavaScript排除在HTML标记之外。如果我使用<a>作为单击事件处理程序,那么我建议使用<a class=“trigger”href=“#”>单击我</a> 。

$('.trigger').click(function (e) {
    e.preventDefault();
    // Do stuff...
});

需要注意的是,许多开发人员认为,使用锚标记来处理点击事件是不好的。他们希望您使用带有一些CSS的<span>或<div>来添加游标:指针;这是一个争论不休的问题。

为了完整起见,这里还有一个选项,即使禁用了JavaScript,也可以阻止链接执行任何操作,而且很短:)

<a href="#void" onclick="myJsFunc()">Run JavaScript function</a>

如果该id不在页面上,则链接将不起作用。

一般来说,我同意Aaron Wagner的回答,JavaScript链接应该与JavaScript代码一起注入到文档中。