以下是构建链接的两种方法,该链接的唯一目的是运行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>
当前回答
我个人将它们结合使用。例如:
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示例。
其他回答
答:这两种方法对网站加载的速度都没有明显的影响。
说明:嗯,两者都同样有效。主要区别与单击操作有关。第一种方法()将地址栏中的URL更改为“#”。第二个方法()将保持地址栏中的URL不变。因此,两者都很好去。
提示:最好使用第二种方法,即:(<a href=“javascript:void(0)”>),因为它是更有效的HTML,不会影响URL栏。
我用开发工具在谷歌chrome中尝试了这两种方法,结果id=“#”花了0.32秒。而javascript:void(0)方法只花了0.18秒。因此,在googlechrome中,javascript:void(0)工作得更好更快。
也不
如果您可以有一个实际的URL,请将其用作HREF。如果有人中间点击你的链接打开一个新的标签,或者他们禁用了JavaScript,onclick就不会启动。
如果这是不可能的,那么您至少应该使用JavaScript和适当的单击事件处理程序将锚标记注入到文档中。
我意识到这并不总是可能的,但在我看来,在开发任何公共网站时都应该努力做到这一点。
查看Unobrusive JavaScript和Progressive增强(两个维基百科)。
在现代网站上,如果元素只执行JavaScript功能(而不是真正的链接),则应避免使用href。
为什么?此元素的存在告诉浏览器这是一个与目的地的链接。这样,浏览器将显示“在新选项卡/窗口中打开”功能(使用shift+单击时也会触发)。这样做将导致在没有触发所需功能的情况下打开同一页面(导致用户沮丧)。
关于IE:从IE8开始,如果设置了doctype,元素样式(包括悬停)就会起作用。IE的其他版本真的不用担心了。
唯一的缺点:删除HREF将删除tabindex。为了克服这个问题,您可以使用样式为链接的按钮或使用JS添加tabindex属性。
我建议改用<button>元素,特别是当控件应该在数据中产生更改时。(类似于POST。)
如果不引人注目地注入元素,这是一种渐进式增强,效果会更好。(请参阅此评论。)