以下是构建链接的两种方法,该链接的唯一目的是运行JavaScript代码。在功能、页面加载速度、验证目的等方面,哪个更好。?
函数myJsFunc(){警报(“myJsFunc”);}<a href=“#”onclick=“myJsFunc();”>运行JavaScript代码</a>
or
函数myJsFunc(){警报(“myJsFunc”);}运行javascript代码</a>
以下是构建链接的两种方法,该链接的唯一目的是运行JavaScript代码。在功能、页面加载速度、验证目的等方面,哪个更好。?
函数myJsFunc(){警报(“myJsFunc”);}<a href=“#”onclick=“myJsFunc();”>运行JavaScript代码</a>
or
函数myJsFunc(){警报(“myJsFunc”);}运行javascript代码</a>
当前回答
理想情况下,您应该这样做:
<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>
或者,更好的是,您可以在HTML中使用默认的操作链接,并且在DOM渲染后通过JavaScript将onclick事件不显眼地添加到元素中,从而确保如果JavaScript不存在/未被利用,您不会有无用的事件处理程序来处理代码,并可能混淆(或至少分散您的注意力)实际内容。
其他回答
只是为了抓住其他人提到的要点。
绑定事件'onload'或$('document').ready{}要好得多;然后将JavaScript直接放入单击事件中。
在JavaScript不可用的情况下,我会使用一个href到当前URL,也许还会使用一个锚到链接的位置。该页面仍然可供没有JavaScript的人使用,因为他们不会注意到任何差异。
正如我所掌握的,这里有一些jQuery可能会有所帮助:
var [functionName] = function() {
// do something
};
jQuery("[link id or other selector]").bind("click", [functionName]);
我个人将它们结合使用。例如:
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示例。
#比javascript:任何东西都好,但以下内容甚至更好:
HTML格式:
<a href="/gracefully/degrading/url/with/same/functionality.ext" class="some-selector">For great justice</a>
JavaScript:
$(function() {
$(".some-selector").click(myJsFunc);
});
您应该始终努力实现优雅的降级(在用户没有启用JavaScript的情况下……以及在有规范和预算的情况下)。此外,在HTML中直接使用JavaScript属性和协议被认为是不好的形式。
我想说,最好的方法是将href锚定到一个你从未使用过的ID上,比如#Do1Not2Use3This4Id5或类似的ID,你100%确信没有人会使用,也不会冒犯他人。
Javascript:void(0)是一个坏主意,违反了启用CSP的HTTPS页面上的内容安全策略https://developer.mozilla.org/en/docs/Security/CSP(感谢@jakub.g)仅使用#将使用户在按下时跳回到顶部如果未启用JavaScript,则不会破坏页面(除非您有JavaScript检测代码如果启用了JavaScript,则可以禁用默认事件除非你知道如何阻止浏览器选择某些文本,否则你必须使用href(不知道使用4是否会消除阻止浏览器选择文本的因素)
基本上没有人在这篇文章中提到5,我认为这很重要,因为如果你的网站突然开始围绕链接进行选择,它会显得不专业。
“#”将使用户返回页面顶部,因此我通常使用void(0)。
javascript:;其行为类似于javascript:void(0);