以下是构建链接的两种方法,该链接的唯一目的是运行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>
当前回答
根据您想要完成的任务,您可以忘记onclick,只需使用href:
<a href="javascript:myJsFunc()">Link Text</a>
它避免了返回false的需要。我不喜欢#选项,因为如上所述,它会将用户带到页面顶部。如果你有其他地方可以发送用户,如果他们没有启用JavaScript(这在我工作的地方很少见,但这是一个非常好的主意),那么Steve提出的方法非常有效。
<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>
最后,如果您不想任何人去任何地方,也不想调用javascript函数,那么可以使用javascript:void(0)。如果您有一个想要发生鼠标悬停事件的图像,但没有任何内容可供用户单击,那么它会非常有用。
其他回答
理想情况下,您应该这样做:
<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>
或者,更好的是,您可以在HTML中使用默认的操作链接,并且在DOM渲染后通过JavaScript将onclick事件不显眼地添加到元素中,从而确保如果JavaScript不存在/未被利用,您不会有无用的事件处理程序来处理代码,并可能混淆(或至少分散您的注意力)实际内容。
2019年1月编辑
在HTML5中,使用没有href属性的a元素是有效的。它被认为是“占位符超链接”
如果a元素没有href属性,则该元素表示一个占位符,如果链接是相关的,则该占位符可能是放置链接的位置,仅包含元素的内容。
例子:
<a>previous</a>
如果在此之后,您希望执行其他操作:
1-如果你的链接不到任何地方,不要使用<a>元素。使用<span>或其他合适的工具,并添加CSS:hover以根据您的需要设置其样式。
2-使用javascript:void(0)OR javascript:undefined OR javascript:;如果你想要原始、精确和快速。
“#”将使用户返回页面顶部,因此我通常使用void(0)。
javascript:;其行为类似于javascript:void(0);
因此,当您使用<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>标签,则可以获得一个优势,您不需要这样做。
所以,如果你看到了,最好不要对这种东西使用标签。
不要将链接仅用于运行JavaScript。
使用href=“#”将页面滚动到顶部;使用void(0)会在浏览器中产生导航问题。
而是使用链接以外的元素:
<span onclick="myJsFunc()" class="funcActuator">myJsFunc</span>
并使用CSS设置样式:
.funcActuator {
cursor: default;
}
.funcActuator:hover {
color: #900;
}