以下是构建链接的两种方法,该链接的唯一目的是运行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>
当前回答
不要将链接仅用于运行JavaScript。
使用href=“#”将页面滚动到顶部;使用void(0)会在浏览器中产生导航问题。
而是使用链接以外的元素:
<span onclick="myJsFunc()" class="funcActuator">myJsFunc</span>
并使用CSS设置样式:
.funcActuator {
cursor: default;
}
.funcActuator:hover {
color: #900;
}
其他回答
您可以使用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
});
这里实际上有四种选择。
使用return false;允许您保留锚版本,以防在禁用JavaScript的浏览器中出现安全的“回退”,或者用户代理不支持(现在用户的1-5%)。如果脚本失败,可以使用锚定符“#”、空字符串或href的特殊URL。请注意,您必须使用href,以便屏幕读者知道它是一个超链接。(注意:我不会讨论删除href属性的问题,因为这一点在这里没有意义。锚上没有href意味着锚不再是一个超链接,而只是一个html标记,上面有一个被捕获的点击事件。)
<a href="" onclick="alert('hello world!');return false;">My Link</a>
<a href="#" onclick="alert('hello world!');return false;">My Link</a>
<a href="MyFallbackURL.html" onclick="alert('hello world!');return false;">My Link</a>
下面是目前在href属性中使用javascript:void(0)的更流行的设计。如果浏览器不支持脚本,则应再次将其发布回页面,因为href超链接路径返回了一个空字符串。如果您不关心谁支持JavaScript,请使用此选项。
<a href="javascript:void(0);" onclick="alert('hello world!');">My Link</a>
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>来添加游标:指针;这是一个争论不休的问题。
不要忽视这样一个事实,即您的URL可能是必需的——在引用之后会触发onclick,因此有时您需要在导航离开页面之前处理客户端的某些内容。