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

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

or

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


当前回答

我想说,最好的方法是将href锚定到一个你从未使用过的ID上,比如#Do1Not2Use3This4Id5或类似的ID,你100%确信没有人会使用,也不会冒犯他人。

Javascript:void(0)是一个坏主意,违反了启用CSP的HTTPS页面上的内容安全策略https://developer.mozilla.org/en/docs/Security/CSP(感谢@jakub.g)仅使用#将使用户在按下时跳回到顶部如果未启用JavaScript,则不会破坏页面(除非您有JavaScript检测代码如果启用了JavaScript,则可以禁用默认事件除非你知道如何阻止浏览器选择某些文本,否则你必须使用href(不知道使用4是否会消除阻止浏览器选择文本的因素)

基本上没有人在这篇文章中提到5,我认为这很重要,因为如果你的网站突然开始围绕链接进行选择,它会显得不专业。

其他回答

除非您使用JavaScript编写链接(这样您就知道它在浏览器中已启用),否则理想情况下,您应该为禁用JavaScript的浏览者提供适当的链接,然后在onclick事件处理程序中阻止该链接的默认操作。这样,启用JavaScript的用户将运行该功能,而禁用JavaScript的用户则将跳转到适当的页面(或同一页面中的位置),而不是只单击链接而不发生任何事情。

我会使用:

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

原因:

这使得href变得简单,搜索引擎需要它。如果您使用其他任何东西(例如字符串),它可能会导致404未找到错误。当鼠标悬停在链接上时,它不会显示它是一个脚本。通过使用return false;,页面不会跳到顶部或断开后退按钮。

在现代网站上,如果元素只执行JavaScript功能(而不是真正的链接),则应避免使用href。

为什么?此元素的存在告诉浏览器这是一个与目的地的链接。这样,浏览器将显示“在新选项卡/窗口中打开”功能(使用shift+单击时也会触发)。这样做将导致在没有触发所需功能的情况下打开同一页面(导致用户沮丧)。

关于IE:从IE8开始,如果设置了doctype,元素样式(包括悬停)就会起作用。IE的其他版本真的不用担心了。

唯一的缺点:删除HREF将删除tabindex。为了克服这个问题,您可以使用样式为链接的按钮或使用JS添加tabindex属性。

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

理想情况下,您应该有一个真正的URL作为非JavaScript用户的回退。

如果这没有意义,请使用#作为href属性。我不喜欢使用onclick属性,因为它将JavaScript直接嵌入到HTML中。更好的方法是使用外部JS文件,然后将事件处理程序添加到该链接。然后,您可以阻止默认事件,以便在用户单击该事件后,URL不会更改为追加#。