以下是构建链接的两种方法,该链接的唯一目的是运行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>
当前回答
肯定hash(#)更好,因为在JavaScript中它是一个伪方案:
污染历史实例化引擎的新副本在全局范围内运行,不尊重事件系统。
当然,使用onclick处理程序防止默认操作的“#”更好。此外,唯一目的是运行JavaScript的链接并不是真正的“链接”,除非当出现问题时,您将用户发送到页面上某个合理的锚点(只需#将发送到顶部)。您可以简单地使用样式表模拟链接的外观,而完全不用考虑href。
此外,关于牛神的建议,特别是:。。。href=“javascript_required.html”onclick=“…这是一种很好的方法,但它没有区分“禁用javascript”和“onclick失败”场景。
其他回答
在现代网站上,如果元素只执行JavaScript功能(而不是真正的链接),则应避免使用href。
为什么?此元素的存在告诉浏览器这是一个与目的地的链接。这样,浏览器将显示“在新选项卡/窗口中打开”功能(使用shift+单击时也会触发)。这样做将导致在没有触发所需功能的情况下打开同一页面(导致用户沮丧)。
关于IE:从IE8开始,如果设置了doctype,元素样式(包括悬停)就会起作用。IE的其他版本真的不用担心了。
唯一的缺点:删除HREF将删除tabindex。为了克服这个问题,您可以使用样式为链接的按钮或使用JS添加tabindex属性。
通常,您应该始终有一个回退链接,以确保禁用JavaScript的客户端仍然具有某些功能。这个概念被称为不引人注目的JavaScript。
实例假设您有以下搜索链接:
<a href="search.php" id="searchLink">Search</a>
您始终可以执行以下操作:
var link = document.getElementById('searchLink');
link.onclick = function() {
try {
// Do Stuff Here
} finally {
return false;
}
};
这样,禁用JavaScript的用户将被引导到search.php,而使用JavaScript的用户则可以查看增强的功能。
理想情况下,您应该这样做:
<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>
或者,更好的是,您可以在HTML中使用默认的操作链接,并且在DOM渲染后通过JavaScript将onclick事件不显眼地添加到元素中,从而确保如果JavaScript不存在/未被利用,您不会有无用的事件处理程序来处理代码,并可能混淆(或至少分散您的注意力)实际内容。
因此,当您使用<a/>标记执行某些JavaScript操作时,如果您也放入href=“#”,则可以在事件末尾添加return false(如果是内联事件绑定),如:
<a href="#" onclick="myJsFunc(); return false;">Run JavaScript Code</a>
或者您可以使用JavaScript更改href属性,如:
<a href="javascript://" onclick="myJsFunc();">Run JavaScript Code</a>
or
<a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>
但从语义上讲,上述所有实现这一点的方法都是错误的(尽管它很好)。如果没有创建任何元素来导航页面,并且有一些JavaScript内容与之相关,那么它不应该是<a>标记。
您可以根据需要简单地使用<button/>来做事情或任何其他元素,如b、span或任何适合的元素,因为您可以在所有元素上添加事件。
因此,使用<a href=“#”>有一个好处。在执行a href=“#”时,默认情况下会在该元素上获得光标指针。为此,我认为您可以使用CSS,比如cursor:pointer;这也解决了这个问题。
最后,如果您从JavaScript代码本身绑定事件,那么如果您使用的是<a>标记,则可以使用event.prpreventDefault()来实现这一点,但如果您没有使用<a>标签,则可以获得一个优势,您不需要这样做。
所以,如果你看到了,最好不要对这种东西使用标签。
答:这两种方法对网站加载的速度都没有明显的影响。
说明:嗯,两者都同样有效。主要区别与单击操作有关。第一种方法()将地址栏中的URL更改为“#”。第二个方法()将保持地址栏中的URL不变。因此,两者都很好去。
提示:最好使用第二种方法,即:(<a href=“javascript:void(0)”>),因为它是更有效的HTML,不会影响URL栏。