以下是构建链接的两种方法,该链接的唯一目的是运行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>
当前回答
不要忽视这样一个事实,即您的URL可能是必需的——在引用之后会触发onclick,因此有时您需要在导航离开页面之前处理客户端的某些内容。
其他回答
我认为你提出了一个错误的二分法。这不是唯一的两个选项。
我同意D4V360先生的观点,他建议,即使您使用的是锚标记,但这里并没有真正的锚。您所拥有的只是文档的一个特殊部分,其行为应该略有不同。<span>标记更合适。
当我有几个人造链接时,我更喜欢给它们一个“没有链接”的类。
然后在jQuery中,我添加了以下代码:
$(function(){
$('.no-link').click(function(e){
e.preventDefault();
});
});
对于HTML,链接简单
<a href="/" class="no-link">Faux-Link</a>
我不喜欢使用哈希标签,除非它们用于锚点,并且只有当我有两个以上的虚假链接时,我才会使用上面的方法,否则我会使用javascript:void(0)。
<a href="javascript:void(0)" class="no-link">Faux-Link</a>
通常情况下,我喜欢完全避免使用链接,只在一个跨度中包装一些东西,并将其用作激活某些JavaScript代码的方式,如弹出窗口或内容显示。
4.0之前的引导模式有一个基本上未记录的行为,即它们将使用AJAX从元素加载href,除非它们正好是#。如果您使用的是Bootstrap 3,javascript:void(0);hrefs将导致javascript错误:
AJAX错误:错误GET javascript:void(0);
在这些情况下,您需要升级到引导程序4或更改href。
我强烈希望尽可能将JavaScript排除在HTML标记之外。如果我使用<a>作为单击事件处理程序,那么我建议使用<a class=“trigger”href=“#”>单击我</a> 。
$('.trigger').click(function (e) {
e.preventDefault();
// Do stuff...
});
需要注意的是,许多开发人员认为,使用锚标记来处理点击事件是不好的。他们希望您使用带有一些CSS的<span>或<div>来添加游标:指针;这是一个争论不休的问题。
我个人将它们结合使用。例如:
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示例。