我应该为JavaScript链接使用哪个“ href”值,“#”或“ javascript:void(0)”?

2020/09/13 21:01 · javascript ·  · 0评论

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

function myJsFunc() {
    alert("myJsFunc");
}
<a href="#" onclick="myJsFunc();">Run JavaScript Code</a>

要么

function myJsFunc() {
    alert("myJsFunc");
}
 <a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>

我用javascript:void(0)

三个原因。鼓励#在一组开发人员中使用,不可避免地导致某些人使用这样的函数的返回值:

function doSomething() {
    //Some code
    return false;
}

但是后来他们忘记了return doSomething()在onclick中使用,而只是使用doSomething()

避免的第二个原因#是,return false;如果被调用的函数抛出错误,则最终将不会执行。因此,开发人员还必须记住在调用的函数中适当地处理任何错误。

第三个原因是在某些情况下,onclick事件属性是动态分配的。我更喜欢能够调用一个函数或动态分配它,而不必专门为一种附加方法或另一种附加方法编写函数。因此,我onclick(或任何形式)的HTML标记如下所示:

onclick="someFunc.call(this)"

要么

onclick="someFunc.apply(this, arguments)"

使用javascript:void(0)可以避免上述所有麻烦,而且我还没有发现任何不利方面的例子。

因此,如果您是一个孤独的开发人员,那么您可以明确地做出自己的选择,但是如果您是团队合作,则必须声明以下两种情况:

使用href="#",请确保onclick始终return false;在最后包含任何被调用的函数都不会引发错误,并且如果您将函数动态地附加到onclick属性上,请确保它不会抛出错误也返回false

要么

href="javascript:void(0)"

第二种显然更容易沟通。

都不行

如果您可以使用一个有意义的实际URL,则可以将其用作HREF。如果有人在您的链接上单击鼠标中键以打开新标签,或者禁用了JavaScript,则onclick不会触发。

如果无法做到这一点,那么您至少应使用JavaScript和适当的click事件处理程序将锚标记注入文档中。

我意识到这并非总是可能的,但是我认为在开发任何公共网站时都应努力做到这一点。

查看Unobtrusive JavaScriptProgressive增强功能(均为Wikipedia)。

五年前,做某事<a href="#" onclick="myJsFunc();">Link</a><a href="javascript:void(0)" onclick="myJsFunc();">Link</a>其他任何包含onclick属性的事都可以,尽管现在可能是个坏习惯。原因如下:

  1. 它促进了侵入性JavaScript的实践-事实证明,JavaScript难以维护且难以扩展。Unobtrusive JavaScript中对此有更多介绍

  2. 您正在花费大量时间编写极其冗长的代码-这对您的代码库几乎没有好处(如果有的话)。

  3. 现在有更好,更容易,更可维护和可扩展的方法来实现所需的结果。

简洁的JavaScript方式

只是根本没有href属性!任何好的CSS重置都会照顾到缺少的默认光标样式,因此这不是问题。然后,使用优美而毫不费力的最佳做法来附加JavaScript功能-当您的JavaScript逻辑停留在JavaScript中而不是在标记中时,这些做法将更具可维护性-当您开始开发需要将逻辑拆分为大型JavaScript应用程序时,这是必不可少的黑盒组件和模板。更多关于这在大型的JavaScript应用程序体系结构

简单的代码示例

// Cancel click event
$('.cancel-action').click(function(){
    alert('Cancel action occurs!');
});

// Hover shim for Internet Explorer 6 and Internet Explorer 7.
$(document.body).on('hover','a',function(){
    $(this).toggleClass('hover');
});
a { cursor: pointer; color: blue; }
a:hover,a.hover { text-decoration: underline; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cancel-action">Cancel this action</a>

黑盒Backbone.js示例

有关可扩展的,黑盒化的Backbone.js组件示例- 请参见此处的此jsfiddle示例请注意,我们是如何利用不干扰JavaScript的做法,并且在少量的代码中,一个组件可以在页面上重复多次,而不会在不同的组件实例之间产生副作用或冲突。惊人!

笔记

  • 忽略元素href属性a将导致无法使用tab键导航访问该元素如果希望通过tab可访问这些元素,则可以设置tabindex属性,或改用button元素。您可以轻松设置按钮元素的样式,使其看起来像Tracker1的answer中提到的普通链接

  • 省略元素href属性a将导致Internet Explorer 6Internet Explorer 7不采用a:hover样式,这就是为什么我们添加了一个简单的JavaScript填充程序来a.hover代替的原因。完全可以,就像您没有href属性且没有正常降级一样,您的链接也将无法正常工作-并且您会担心更大的问题。

  • 如果您希望您的操作在禁用JavaScript的情况下仍能正常工作,请使用具有某些URL属性a元素,元素href将通过手动而不是通过Ajax请求或其他方式执行操作的URL。如果您正在执行此操作,则要确保event.preventDefault()在您的点击通话中执行一次以确保单击按钮时它不会跟随链接。此选项称为正常降级。

'#'会将用户带回到页面顶部,所以我通常选择void(0)

javascript:; 也表现得像 javascript:void(0);

老实说,我都不建议。我将使用一种程式化<button></button>的行为。

button.link {
  display: inline-block;
  position: relative;
  background-color: transparent;
  cursor: pointer;
  border: 0;
  padding: 0;
  color: #00f;
  text-decoration: underline;
  font: inherit;
}
<p>A button that looks like a <button type="button" class="link">link</button>.</p>

这样,您可以分配onclick。我还建议通过脚本进行绑定,而不要使用onclickelement标签上的属性。唯一的难题是无法禁用的较旧IE中的伪3d文本效果。


如果必须使用A元素,请使用javascript:void(0);已经提到的原因。

  • 万一您的onclick事件失败,它将始终拦截。
  • 不会发生错误的加载调用,也不会基于哈希更改触发其他事件
  • 如果单击失败(onclick抛出),则hash标签可能会导致意外的行为,请避免使用它,除非它是适当的失败行为,并且您想更改导航历史记录。

注意:您可以将替换为0一个字符串,例如,javascript:void('Delete record 123')它可以用作一个额外的指示符,该指示符将显示单击的实际作用。

第一个,理想情况下带有真实链接,以防用户禁用JavaScript。只要确保返回false即可防止JavaScript执行时触发click事件。

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

如果您使用Angular2,则这种方式有效:

<a [routerLink]="" (click)="passTheSalt()">Click me</a>

看到这里https://stackoverflow.com/a/45465728/2803344

你也不要问我。

如果您的“链接”的唯一目的是运行一些JavaScript代码,则该链接不符合链接的条件;而是一段带有JavaScript函数的文本。我建议使用带有<span>标签的标签onclick handler和一些基本的CSS来模仿链接。链接用于导航,如果您的JavaScript代码不用于导航,则不应将其作为<a>标签。

例:

function callFunction() { console.log("function called"); }
.jsAction {
    cursor: pointer;
    color: #00f;
    text-decoration: underline;
}
<p>I want to call a JavaScript function <span class="jsAction" onclick="callFunction();">here</span>.</p>

理想情况下,您可以这样做:

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

或者,甚至更好的是,您将在HTML中具有默认的动作链接,并且会在DOM呈现后通过JavaScript将onclick事件毫不费力地添加到元素中,从而确保如果不存在/未使用JavaScript,您不会有无用的事件处理程序使您的代码混乱,并可能混淆(或至少分散您的注意力)您的实际内容。

使用只会#产生一些有趣的动作,因此,#self如果您希望省去打字的工作,我建议您使用JavaScript bla, bla,

我用以下

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

代替

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

我同意其他地方的建议,即应该在href属性中使用常规URL ,然后在onclick中调用一些JavaScript函数。缺陷在于,它们会return false在通话后自动添加

这种方法的问题是,如果该功能不起作用或出现任何问题,则该链接将变得不可单击。Onclick事件将始终返回false,因此不会调用普通URL。

有一个非常简单的解决方案。true如果函数正常工作,让它返回然后使用返回的值确定是否应取消点击:

的JavaScript

function doSomething() {
    alert( 'you clicked on the link' );
    return true;
}

的HTML

<a href="path/to/some/url" onclick="return !doSomething();">link text</a>

注意,我否定了doSomething()函数的结果如果有效,它将返回true,因此将被取反(false)并且path/to/some/URL不会被调用。如果该函数将返回false(例如,浏览器不支持该函数中使用的某些内容或发生其他任何错误),则将其取反truepath/to/some/URL调用。

#比更好javascript:anything,但以下更好:

HTML:

<a href="/gracefully/degrading/url/with/same/functionality.ext" class="some-selector">For great justice</a>

JavaScript:

$(function() {
    $(".some-selector").click(myJsFunc);
});

您应该始终努力使性能降级(在用户未启用JavaScript的情况下……以及在具有规范和预算的情况下)。另外,直接在HTML中使用JavaScript属性和协议也被认为是不好的形式。

我建议改用<button>元素,尤其是在控件应该在数据中产生更改的情况下。(有点像POST。)

如果不加干扰地注入元素(一种渐进增强),那就更好了。(请参阅此评论。)

除非您使用JavaScript写出链接(以便您知道已在浏览器中启用它),否则,理想情况下,应该为禁用了JavaScript进行浏览的用户提供正确的链接,然后阻止onclick中该链接的默认操作事件处理程序。这样,那些启用了JavaScript的用户将运行该功能,而那些禁用JavaScript的用户将跳至相应的页面(或同一页面内的位置),而不仅仅是单击链接而没有任何反应。

绝对哈希(#)更好,因为在JavaScript中,它是一个伪方案:

  1. 污染历史
  2. 实例化引擎的新副本
  3. 在全局范围内运行,并且不尊重事件系统。

当然,带有防止默认操作的onclick处理程序的“#”要好得多。而且,仅在运行JavaScript时才有的链接并不是真正的“链接”,除非您在出现问题时将用户引导至页面上的某个合理锚点(只是#将发送至顶部)。您可以简单地模拟与样式表链接的外观,而完全不用考虑href。

另外,关于Cowgod的建议,尤其是这样:...href="javascript_required.html" onclick="...这是一个好方法,但是不能区分“ JavaScript禁用”和“ onclick失败”两种情况。

我通常去

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

它比javascript:void(0)短,并且执行相同的操作。

我会用:

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

原因:

  1. 这使得href简单的搜索引擎需要它。如果使用其他任何内容(例如字符串),则可能会导致404 not found错误。
  2. 当鼠标悬停在链接上时,并不表示它是脚本。
  3. 通过使用return false;,页面不会跳到顶部或断开back按钮。

我选择use javascript:void(0),因为使用此方法可能会阻止右键单击以打开内容菜单。但是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>

要么

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

但是从语义上讲,以上所有实现此目的的方法都是错误的(尽管效果很好)如果未创建任何元素来导航页面并且具有与之相关联的一些JavaScript东西,则该元素不应为<a>标记。

您可以简单地使用a <button />代替做事,也可以根据需要使用其他任何元素,例如b,span或任何适合的元素,因为您可以在所有元素上添加事件。


所以,有一个好处来使用<a href="#">这样做时,默认情况下会在该元素上获得光标指针a href="#"为此,我认为您可以为此使用CSS,cursor:pointer;也可以解决此问题。

最后,如果您是从JavaScript代码本身绑定事件,event.preventDefault()那么在使用<a>标签的情况下可以做到这一点,但是如果您没有<a>为此使用标签的话,那么您将获得优势,而您不需要这样做。

因此,如果您看到了,最好不要在此类内容中使用标签。

不要仅出于运行JavaScript的目的而使用链接。

使用href =“#”会将页面滚动到顶部;使用void(0)会在浏览器中造成导航问题。

而是使用链接以外的其他元素:

<span onclick="myJsFunc()" class="funcActuator">myJsFunc</span>

并使用CSS设置样式:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

最好使用jQuery,

$(document).ready(function() {
    $("a").css("cursor", "pointer");
});

并省略href="#"href="javascript:void(0)"

锚标签标记将像

<a onclick="hello()">Hello</a>

很简单!

如果碰巧正在使用AngularJS,则可以使用以下代码:

<a href="">Do some fancy JavaScript</a>

不会做什么。

此外

  • 与(#)一样,它不会带您到页面顶部。

    • 因此,您不需要显式返回falseJavaScript
  • 简而言之

如果没有,href也许没有理由使用锚标签。

您几乎可以在每个元素上附加事件(单击,悬停等),那么为什么不只使用a spandiv?呢?

对于禁用了JavaScript的用户:如果没有后备广告(例如,Alternative href),那么他们至少应该完全看不到该元素并与之交互,无论它是<a>还是<span>标签。

通常,您应该始终具有一个后备链接,以确保禁用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;
    }
};

这样,search.php当使用JavaScript的查看器查看您的增强功能时,将定向到禁用JavaScript的人

我个人将它们组合使用。例如:

的HTML

<a href="#">Link</a>

一点点的jQuery

$('a[href="#"]').attr('href','javascript:void(0);');

要么

$('a[href="#"]').click(function(e) {
   e.preventDefault();
});

但是我使用它只是为了防止用户单击空锚点时页面跳到顶部。我很少on直接在HTML中使用onClick和其他事件。

我的建议是使用<span>带有class属性的element 而不是锚。例如:

<span class="link">Link</span>

然后.link使用包裹在主体中,</body>标签之前或外部JavaScript文档中的脚本将函数分配给

<script>
    (function($) {
        $('.link').click(function() {
            // do something
        });
    })(jQuery);
</script>

*注意:对于动态创建的元素,请使用:

$('.link').on('click', function() {
    // do something
});

对于使用动态创建的元素创建的动态创建的元素,请使用:

$(document).on('click','.link', function() {
    // do something
});

然后,您可以将span元素设置样式,使其看起来像是带有一点CSS的锚点:

.link {
    color: #0000ee;
    text-decoration: underline;
    cursor: pointer;
}
.link:active {
    color: red;
}

是上面提到的jsFiddle示例。

根据您要完成的工作,您可能会忘记onclick而仅使用href:

<a href="javascript:myJsFunc()">Link Text</a>

它绕过了返回false的需要。我不喜欢该#选项,因为如上所述,它将把用户带到页面顶部。如果您在其他地方未启用JavaScript来发送用户(这在我工作的地方很少见,但这是一个很好的主意),那么Steve提出的方法非常有用。

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

最后,javascript:void(0)如果您不希望任何人去任何地方并且不想调用JavaScript函数,则可以使用。如果您有想要发生鼠标悬停事件的图像,则效果很好,但是用户没有任何可单击的东西。

当我有几个虚假链接时,我更喜欢给他们一类“无链接”。

然后在jQuery中,添加以下代码:

$(function(){
   $('.no-link').click(function(e){
       e.preventDefault();
   });
});

对于HTML,链接很简单

<a href="/" class="no-link">Faux-Link</a>

我不喜欢使用Hash-Tags,除非它们用于锚点,并且只有在我拥有两个以上的虚假链接时才执行上述操作,否则我将使用javascript:void(0)。

<a href="javascript:void(0)" class="no-link">Faux-Link</a>

通常,我只想避免使用任何链接,而只是在跨度中包裹一些内容,并将其用作激活某些JavaScript代码的方式,例如弹出窗口或内容展示。

我相信您正在提出错误的二分法。这些不是仅有的两个选择。

我同意D4V360先生的意见,他建议,即使您使用的是定位标记,您在这里也没有真正的定位标记。您所拥有的只是文档的特殊部分,其行为应略有不同。一个<span>标签是更为合适。

我使用开发人员工具在谷歌浏览器中进行了尝试,id="#"花了0.32秒。而该javascript:void(0)方法仅花费了0.18秒。因此,在谷歌浏览器中,javascript:void(0)效果更好,更快。

我基本上是从这篇使用渐进增强的实用文章来解释的简短的答案是您从不使用,javascript:void(0);或者#除非您的用户界面已经推断启用了JavaScript,否则应使用javascript:void(0);另外,请勿将span用作链接,因为一开始它在语义上是错误的。

在您的应用程序中使用SEO友好的URL路由(例如/ Home / Action / Parameters)也是一种好习惯。如果您有一个指向页面的链接,该页面首先在没有JavaScript的情况下运行,则可以在以后增强体验。使用指向工作页面的真实链接,然后添加一个onlick事件以增强演示效果。

这是一个样本。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>
本文地址:http://javascript.askforanswer.com/woyinggaiweijavascriptlianjieshiyongnage-hrefzhihuo-javascriptvoid0.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!