以下是构建链接的两种方法,该链接的唯一目的是运行JavaScript代码。在功能、页面加载速度、验证目的等方面,哪个更好。?

函数myJsFunc(){警报(“myJsFunc”);}<a href=“#”onclick=“myJsFunc();”>运行JavaScript代码</a>

or

函数myJsFunc(){警报(“myJsFunc”);}运行javascript代码</a>


当前回答

只使用#会做出一些有趣的动作,所以如果你想节省JavaScript bla、bla、的输入工作量,我建议使用#self,。

其他回答

我基本上是在用渐进式增强来解释这篇实用文章。简单的答案是,您永远不会使用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>

我建议改用<button>元素,特别是当控件应该在数据中产生更改时。(类似于POST。)

如果不引人注目地注入元素,这是一种渐进式增强,效果会更好。(请参阅此评论。)

我从你的话中了解到,你想要创建一个链接来运行JavaScript代码。

然后你应该考虑到有人在浏览器中阻止JavaScript。

因此,如果你真的要将该链接仅用于运行JavaScript函数,那么你应该动态添加它,这样即使用户没有在浏览器中启用JavaScript,也不会看到它,而你使用该链接只是为了触发一个JavaScript函数,在浏览器中禁用JavaScript时,使用这样的链接是没有意义的。

由于这个原因,当JavaScript被禁用时,它们都不好。

a如果启用了JavaScript,并且您只想使用该链接调用JavaScript函数,则

<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>

比使用

<a href="#" onclick="myJsFunc();">Link</a>

因为href=“#”将导致页面执行不需要的操作。

此外,<a href=“javascript:void(0)”onclick=“myJsFunc();”>Link</a>优于<a href=”#“onclick=“myJsFunc(;)”>Link//a>的另一个原因是javascript被用作大多数浏览器的默认脚本语言。例如,InternetExplorer使用onclick属性来定义要使用的脚本语言类型。除非出现另一种好的脚本语言,否则Internet Explorer也会使用JavaScript作为默认语言,但如果另一种脚本语言使用JavaScript:,则会让Internet Explorer了解正在使用的脚本语言。

考虑到这一点,我更喜欢使用和锻炼

<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>

为了让它成为一种习惯,为了更方便用户,请在JavaScript代码中添加此类链接:

$(document).ready(function(){
    $(".blabla").append('<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>')
});

我通常会去

<a href="javascript:;" onclick="yourFunction()">Link description</a>

它比javascript:void(0)短,并且做了同样的事情。

不要忽视这样一个事实,即您的URL可能是必需的——在引用之后会触发onclick,因此有时您需要在导航离开页面之前处理客户端的某些内容。