以下是构建链接的两种方法,该链接的唯一目的是运行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>
当前回答
我看到了很多想继续使用#values for href的人的答案,因此,这里有一个答案,希望能让两个阵营都满意:
A) 我很高兴将javascript:void(0)作为我的href值:
<a href="javascript:void(0)" onclick="someFunc.call(this)">Link Text</a>
B) 我正在使用jQuery,并希望#作为我的href值:
<a href="#" onclick="someFunc.call(this)">Link Text</a>
<script type="text/javascript">
/* Stop page jumping when javascript links are clicked.
Only select links where the href value is a #. */
$('a[href="#"]').live("click", function(e) {
return false; // prevent default click action from happening!
e.preventDefault(); // same thing as above
});
</script>
注意,如果您知道链接不会动态创建,请改用单击功能:
$('a[href=“#”]').click(函数(e){
其他回答
第一个,最好是在用户禁用JavaScript的情况下使用一个真正的链接。只需确保返回false,以防止在JavaScript执行时触发单击事件。
<a href="#" onclick="myJsFunc(); return false;">Link</a>
如果您使用Angular2,则此方法有效:
<a[routerLink]=“”(单击)=“passTheSalt()”>单击我</a>。
请参见此处https://stackoverflow.com/a/45465728/2803344
不要忽视这样一个事实,即您的URL可能是必需的——在引用之后会触发onclick,因此有时您需要在导航离开页面之前处理客户端的某些内容。
为了完整起见,这里还有一个选项,即使禁用了JavaScript,也可以阻止链接执行任何操作,而且很短:)
<a href="#void" onclick="myJsFunc()">Run JavaScript function</a>
如果该id不在页面上,则链接将不起作用。
一般来说,我同意Aaron Wagner的回答,JavaScript链接应该与JavaScript代码一起注入到文档中。
我看到了很多想继续使用#values for href的人的答案,因此,这里有一个答案,希望能让两个阵营都满意:
A) 我很高兴将javascript:void(0)作为我的href值:
<a href="javascript:void(0)" onclick="someFunc.call(this)">Link Text</a>
B) 我正在使用jQuery,并希望#作为我的href值:
<a href="#" onclick="someFunc.call(this)">Link Text</a>
<script type="text/javascript">
/* Stop page jumping when javascript links are clicked.
Only select links where the href value is a #. */
$('a[href="#"]').live("click", function(e) {
return false; // prevent default click action from happening!
e.preventDefault(); // same thing as above
});
</script>
注意,如果您知道链接不会动态创建,请改用单击功能:
$('a[href=“#”]').click(函数(e){
我基本上是在用渐进式增强来解释这篇实用文章。简单的答案是,您永远不会使用javascript:void(0);或#,除非您的用户界面已经推断JavaScript已启用,在这种情况下,您应该使用JavaScript:void(0);。此外,不要使用span作为链接,因为这在语义上是错误的。
在应用程序中使用SEO友好的URL路由,例如/Home/Action/Parameters也是一种很好的做法。如果你有一个链接到一个没有JavaScript的页面,你可以在之后增强体验。使用指向工作页面的真实链接,然后添加联机事件以增强演示。
这是一个示例。Home/ChangePicture是一个指向页面上的表单的工作链接,该表单带有用户界面和标准HTML提交按钮,但它被注入到带有jQueryUI按钮的模态对话框中看起来更好。无论哪种方式都有效,这取决于浏览器,满足移动优先开发。
<p><a href="Home/ChangePicture" onclick="return ChangePicture_onClick();" title="Change Picture">Change Picture</a></p>
<script type="text/javascript">
function ChangePicture_onClick() {
$.get('Home/ChangePicture',
function (htmlResult) {
$("#ModalViewDiv").remove(); //Prevent duplicate dialogs
$("#modalContainer").append(htmlResult);
$("#ModalViewDiv").dialog({
width: 400,
modal: true,
buttons: {
"Upload": function () {
if(!ValidateUpload()) return false;
$("#ModalViewDiv").find("form").submit();
},
Cancel: function () { $(this).dialog("close"); }
},
close: function () { }
});
}
);
return false;
}
</script>