4315

以下是构建链接的两种方法,其唯一目的是运行 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>

4

55 回答 55

2255

I use javascript:void(0).

Three reasons. Encouraging the use of # amongst a team of developers inevitably leads to some using the return value of the function called like this:

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

But then they forget to use return doSomething() in the onclick and just use doSomething().

A second reason for avoiding # is that the final return false; will not execute if the called function throws an error. Hence the developers have to also remember to handle any error appropriately in the called function.

A third reason is that there are cases where the onclick event property is assigned dynamically. I prefer to be able to call a function or assign it dynamically without having to code the function specifically for one method of attachment or another. Hence my onclick (or on anything) in HTML markup look like this:

onclick="someFunc.call(this)"

OR

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

Using javascript:void(0) avoids all of the above headaches, and I haven't found any examples of a downside.

So if you're a lone developer then you can clearly make your own choice, but if you work as a team you have to either state:

Use href="#", make sure onclick always contains return false; at the end, that any called function does not throw an error and if you attach a function dynamically to the onclick property make sure that as well as not throwing an error it returns false.

OR

Use href="javascript:void(0)"

The second is clearly much easier to communicate.

于 2008-09-26T08:03:39.907 回答
1384

两者都不。

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

如果这不可能,那么您至少应该使用 JavaScript 和适当的单击事件处理程序将锚标记注入文档。

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

查看Unobtrusive JavaScriptProgressive enhancement(都是维基百科)。

于 2008-09-25T18:09:22.627 回答
798

做事<a href="#" onclick="myJsFunc();">Link</a><a href="javascript:void(0)" onclick="myJsFunc();">Link</a>其他任何包含onclick属性的事情——五年前还可以,尽管现在这可能是一种不好的做法。原因如下:

  1. 它促进了侵入式 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 的回答中提到的普通链接。

  • 省略元素href上的属性将导致Internet Explorer 6Internet Explorer 7不采用样式,这就是为什么我们添加了一个简单的 JavaScript shim 来代替通过。这完全没问题,就好像您没有 href 属性并且没有优雅降级一样,那么您的链接无论如何都不会工作 - 您将有更大的问题需要担心。aa:hovera.hover

  • 如果您希望您的操作仍然在禁用 JavaScript 的情况下工作,那么使用一个a带有href属性的元素,该属性转到某个 URL,该 URL 将手动执行该操作,而不是通过 Ajax 请求或任何应该采取的方式。如果您正在执行此操作,那么您要确保event.preventDefault()在单击调用时执行一次单击,以确保单击按钮时它不会跟随链接。此选项称为优雅降级。

于 2012-02-25T02:08:18.010 回答
355

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

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

于 2008-09-25T17:55:34.953 回答
312

老实说,我都不会建议。<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。我还建议通过脚本绑定,而不是使用onclick元素标签上的属性。唯一的问题是旧 IE 中无法禁用的伪 3d 文本效果。


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

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

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

于 2011-12-15T18:41:57.957 回答
149

第一个,最好有一个真实的链接,以防用户禁用了 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

于 2008-09-25T17:56:53.467 回答
110

如果你问我也不行;

如果您的“链接”的唯一目的是运行一些 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>

于 2008-09-25T18:59:47.497 回答
104

理想情况下,您会这样做:

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

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

于 2008-09-25T18:35:42.470 回答
76

使用只是做一些有趣的动作,所以如果你想节省打字工作,#我建议使用.#selfJavaScript bla, bla,

于 2011-09-24T01:55:06.253 回答
71

我使用以下

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

反而

<a href="javascript:void(0);" onclick="myJsFunc();">Link</a>
于 2009-04-17T06:49:34.703 回答
61

我建议改用一个<button>元素,尤其是当控件应该产生数据变化时。(类似于 POST 的东西。)

如果你不显眼地注入元素,那就更好了,这是一种渐进增强。(请参阅此评论。)

于 2008-10-16T17:46:51.417 回答
56

我同意其他地方的建议,即您应该在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(例如,浏览器不支持函数中使用的某些内容或其他任何错误),则它被否定true并被path/to/some/URL调用。

于 2008-09-27T10:58:16.537 回答
52

#比 好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 属性和协议被认为是不好的形式。

于 2009-11-23T20:38:21.857 回答
43

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

于 2008-09-25T18:02:31.253 回答
37

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

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

当然,带有防止默认操作的 onclick 处理程序的“#”会更好。此外,仅用于运行 JavaScript 的链接并不是真正的“链接”,除非您在出现问题时将用户发送到页面上的某个合理的锚点(只有 # 将发送到顶部)。您可以简单地使用样式表模拟链接的外观和感觉,而完全忘记 href。

另外,关于cowgod的建议,特别是这个:...href="javascript_required.html" onclick="...这是个好方法,但它不区分“JavaScript禁用”和“onclick失败”场景。

于 2009-11-07T02:26:48.550 回答
30

我通常去

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

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

于 2015-08-13T01:01:04.130 回答
27

我选择 use javascript:void(0),因为使用它可以防止右键单击打开内容菜单。但是javascript:;更短并且做同样的事情。

于 2011-07-26T11:35:44.707 回答
27

我会使用:

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

原因:

  1. 这使得href简单,搜索引擎需要它。如果您使用其他任何内容(例如字符串),则可能会导致404 not found错误。
  2. 当鼠标悬停在链接上时,它不会显示它是一个脚本。
  3. 通过使用return false;,页面不会跳转到顶部或破坏back按钮。
于 2011-12-16T00:09:40.960 回答
26

不要将链接用于运行 JavaScript 的唯一目的。

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

相反,使用链接以外的元素:

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

并使用 CSS 设置样式:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}
于 2016-01-26T19:54:18.667 回答
24

所以,当你用一个<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>为此使用标签,那么您将获得优势,您不需要不需要这样做。

所以,如果你看到了,最好不要为这类东西使用标签。

于 2014-02-13T03:34:00.917 回答
23

使用jQuery会更好,

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

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

锚标记标记将像

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

够简单!

于 2008-10-23T09:55:57.323 回答
20

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

于 2008-10-16T18:00:25.290 回答
19

如果您碰巧使用的是AngularJS,您可以使用以下内容:

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

这不会做任何事情。

此外

  • 它不会带您到页面顶部,如 (#)
    • 因此,您不需要false使用 JavaScript显式返回
  • 简明扼要
于 2013-07-25T22:31:57.607 回答
17

我相信你提出了错误的二分法。这不是唯一的两个选择。

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

于 2008-09-25T21:20:35.317 回答
17

根据您想要完成的任务,您可能会忘记 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 函数,则可以使用。如果您有一个希望发生鼠标悬停事件的图像,它会很好用,但是用户没有任何东西可以点击。

于 2008-09-25T21:02:38.123 回答
16

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

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而不是锚点。例如:

<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示例。

于 2014-04-26T18:37:30.263 回答
16

我用开发者工具在谷歌浏览器中都试过了,id="#"花了 0.32 秒。而该javascript:void(0)方法只用了 0.18 秒。所以在谷歌浏览器中,javascript:void(0)工作得更好更快。

于 2016-10-29T19:10:16.520 回答
15

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

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

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

对于 HTML,链接很简单

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

我不喜欢使用哈希标签,除非它们用于锚点,而且我只在有两个以上的虚假链接时才执行上述操作,否则我会使用 javascript:void(0)。

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

通常,我喜欢完全避免使用链接,而只是将一些东西包裹在一个跨度中,并将其用作激活某些 JavaScript 代码的一种方式,例如弹出窗口或内容显示。

于 2012-06-25T19:34:39.380 回答
14

禁用 JavaScript 的用户可以访问您的站点是一件好事,在这种情况下,href 指向的页面执行与正在执行的 JavaScript 相同的操作。否则,我使用“ # ”和“ return false;”来防止其他人提到的默认操作(滚动到页面顶部)。

谷歌搜索“ javascript:void(0)”提供了很多关于这个主题的信息。其中一些,比如这个提到不使用 void(0)的原因。

于 2008-09-25T18:40:14.080 回答
13

我基本上是从这篇实用文章中使用渐进增强来解释的。简短的回答是你永远不会使用javascript:void(0);,或者#除非你的用户界面已经推断出 JavaScript 已启用,在这种情况下你应该使用javascript:void(0);. 另外,不要使用 span 作为链接,因为这在语义上是错误的。

在您的应用程序中使用SEO友好的 URL 路由,例如 /Home/Action/Parameters 也是一种很好的做法。如果你有一个链接到一个没有 JavaScript 的页面,你可以在之后增强体验。使用指向工作页面的真实链接,然后添加 onlick 事件以增强演示文稿。

这是一个示例。Home/ChangePicture 是页面上的表单的工作链接,带有用户界面和标准 HTML 提交按钮,但它看起来更好地注入到带有 jQ​​ueryUI 按钮的模式对话框中。无论哪种方式都有效,具体取决于满足移动优先开发的浏览器。

<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>
于 2011-12-14T22:09:59.440 回答
13

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

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

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

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

于 2017-03-26T23:27:35.263 回答
11

你也可以像这样在锚中写一个提示:

<a href="javascript:void('open popup image')" onclick="return f()">...</a>

所以用户会知道这个链接的作用。

于 2009-02-28T17:06:31.770 回答
10

我将 href="#" 用于我想要虚拟行为的链接。然后我使用这段代码:

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

这意味着如果 href 等于哈希 (*="#") 它会阻止默认链接行为,因此仍然允许您为其编写功能,并且不会影响锚点点击。

于 2014-03-07T14:28:04.413 回答
10

不要忽视你的 URL 可能是必要的事实——在引用之前触发了 onclick,所以有时你需要在离开页面之前在客户端处理一些东西。

于 2008-09-25T17:57:48.300 回答
10

这里还有一件更重要的事情要记住。第 508 节合规性。正因为如此,我觉得有必要指出,您需要JAWS等屏幕阅读器的锚标记才能通过选项卡对其进行聚焦。因此,“只使用 JavaScript 并忘记开头的锚点”的解决方案不是其中一些选项。仅当您无法让屏幕跳回顶部时,才需要在 href 中触发 JavaScript。您可以使用 0 秒的 settimeout 并将 JavaScript 触发到您需要关注的位置,但即使是 apage 也会跳到顶部然后返回。

于 2010-12-27T15:17:02.903 回答
10

我想说最好的方法是为您从未使用过的 ID 制作一个 href 锚点,例如 #Do1Not2Use3This4Id5 或类似的 ID,您可以 100% 确定没有人会使用并且不会冒犯他人。

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

基本上没有人在本文中提到 5,我认为这很重要,因为如果您的网站突然开始选择链接周围的内容,它就会显得不专业。

于 2014-03-20T10:55:57.740 回答
9

只是为了了解其他一些人提到的观点。

最好绑定事件 'onload'a 或 $('document').ready{}; 然后将 JavaScript 直接放入 click 事件中。

在 JavaScript 不可用的情况下,我会使用指向当前 URL 的 href,也可能使用指向链接位置的锚点。该页面仍然可供没有 JavaScript 的人使用,那些没有注意到任何差异的人。

正如我手头的,这里有一些 jQuery 可能会有所帮助:

var [functionName] = function() {
   // do something
};

jQuery("[link id or other selector]").bind("click", [functionName]);
于 2008-10-23T14:22:33.540 回答
9

最简单也是大家使用最多的就是javascript:void(0)你可以用它来代替#来停止标签重定向到标题部分

<a href="javascript:void(0)" onclick="testFunction();">Click To check Function</a>

function testFunction() {
    alert("hello world");
}
于 2019-06-14T11:37:31.553 回答
8

理想情况下,您应该有一个真实的 URL 作为非 JavaScript 用户的后备。

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

于 2008-09-25T18:50:38.143 回答
8

您可以使用 href 并删除所有只有散列的链接:

HTML:

<a href="#" onclick="run_foo()"> foo </a>

JS:

$(document).ready(function(){         // on DOM ready or some other event

   $('a[href=#]').attr('href','');    // set all reference handles to blank strings
                                      //  for anchors that have only hashes

});
于 2012-08-22T16:08:03.150 回答
8

我看到很多想要继续使用#值的人的答案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>

请注意,如果您知道不会动态创建链接,请改用该click函数:

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

于 2012-03-16T02:16:13.690 回答
8

我从您的话中了解到,您想创建一个链接只是为了运行 JavaScript 代码。

那么你应该考虑到有些人在他们的浏览器中阻止了 JavaScript。

因此,如果您真的打算将该链接仅用于运行 JavaScript 函数,那么您应该动态添加它,这样即使用户没有在浏览器中启用他们的 JavaScript 并且您使用该链接只是为了触发一个 JavaScript 函数,当在浏览器中禁用 JavaScript 时,使用这样的链接是没有意义的。

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

Aand 如果启用了 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>此外,另一个优于JavaScript 的原因是<a href="#" onclick="myJsFunc();">Link</a>JavaScript 被用作大多数浏览器的默认脚本语言。作为 Internet Explorer 的示例,它使用 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>')
});
于 2011-12-15T09:21:35.130 回答
8

为什么不使用这个?这不会向上滚动页面。

<span role="button" onclick="myJsFunc();">Run JavaScript Code</span>
于 2014-11-18T15:42:45.403 回答
7

If you use a link as a way to just execute some JavaScript code (instead of using a span like D4V360 greatly suggested), just do:

<a href="javascript:(function()%7Balert(%22test%22)%3B%7D)()%3B">test</a>

If you're using a link with onclick for navigation, don't use href="#" as the fallback when JavaScript is off. It's usually very annoying when the user clicks on the link. Instead, provide the same link the onclick handler would provide if possible. If you can't do that, skip the onclick and just use a JavaScript URI in the href.

于 2008-09-25T21:38:17.850 回答
7

如果你正在使用一个<a>元素,只需使用这个:

<a href="javascript:myJSFunc();" />myLink</a>

就我个人而言,稍后我会附加一个带有 JavaScript 的事件处理程序(也可以使用attachEvent或者addEventListener也许<把你最喜欢的 JavaScript 框架放在这里>)。

于 2008-09-26T11:44:40.193 回答
7

与整体情绪完全一致,在void(0)需要时使用,在需要时使用有效 URL。

使用URL 重写,您可以使 URL 不仅可以在禁用 JavaScript 的情况下执行您想要执行的操作,而且还可以准确地告诉您它要做什么。

<a href="./Readable/Text/URL/Pointing/To/Server-Side/Script" id="theLinkId">WhyClickHere</a>

在服务器端,你只需要解析 URL 和查询字符串,然后做你想做的事。如果您很聪明,您可以允许服务器端脚本以不同的方式响应 Ajax 和标准请求。允许您拥有处理页面上所有链接的简洁集中代码。

URL重写教程

优点

  • 显示在状态栏中
  • 通过 JavaScript 中的 onclick 处理程序轻松升级到 Ajax
  • 实际上评论自己
  • 防止您的目录被一次性使用的 HTML 文件弄得乱七八糟

缺点

  • 仍应在 JavaScript 中使用 event.preventDefault()
  • 服务器端相当复杂的路径处理和 URL 解析。

我敢肯定那里还有更多的缺点。随意讨论它们。

于 2010-07-17T22:46:42.633 回答
7

2019 年 1 月编辑

HTML5中,使用没有 href 属性的 a 元素是有效的。它被认为是“占位符超链接”

如果 a 元素没有 href 属性,则该元素代表一个占位符,用于放置链接,如果它是相关的,则仅包含元素的内容。

例子:

<a>previous</a>

如果在那之后你想做其他事情:

1 - 如果您的链接无处可去,请不要使用<a>元素。使用 a<span>或其他适当的东西并添加 CSS:hover以根据需要设置样式。

2 -如果您想要原始、精确和快速,请使用javascript:void(0)OR javascript:undefinedOR 。javascript:;

于 2019-01-02T15:45:25.967 回答
6

不应该在你的 HTML 中使用inlineonclick="something();"来避免无意义的代码污染它;所有点击绑定都必须在 Javascript 文件 (*.js) 中设置。

像这样设置绑定:$('#myAnchor').click(function(){... **return false**;});$('#myAnchor').bind('click', function(){... **return false**;});

然后你有一个干净的 HTML 文件,易于加载(并且对 seo 友好),没有数千个href="javascript:void(0);"而且只是href="#"

于 2013-02-08T14:15:02.623 回答
6

我强烈希望尽可能地让我的 JavaScript 远离我的 HTML 标记。如果我<a>用作单击事件处理程序,那么我建议使用<a class="trigger" href="#">Click me!</a>.

$('.trigger').click(function (e) {
    e.preventDefault();
    // Do stuff...
});

值得注意的是,许多开发人员认为将锚标记用于单击事件处理程序并不好。他们希望您使用 a <span>or<div>和一些添加cursor: pointer;到它的 CSS。这是一个争论不休的问题。

于 2011-12-14T21:06:36.227 回答
3

为了完整起见,这里还有一个选项,即使 JavaScript 被禁用,它也会阻止链接做任何事情,而且它很短:)

<a href="#void" onclick="myJsFunc()">Run JavaScript function</a>

如果页面上不存在 id,则链接将不执行任何操作。

一般来说,我同意 Aaron Wagner 的回答,应该将 JavaScript 链接与 JavaScript 代码一起注入到文档中。

于 2012-03-15T09:43:37.887 回答
3

这里实际上有四个选项

return false;如果您希望在禁用JavaScript或用户代理不支持它的浏览器中安全“回退” (现在占用户的 1-5%),使用它可以让您保留锚版本。href 如果脚本失败,您可以使用锚点“#”符号、空字符串或特殊 URL 。请注意,您必须使用href屏幕阅读器才能知道它是超链接。(注意:我不打算讨论关于删除href属性的争论,因为这一点在这里没有实际意义。没有href锚点意味着锚点不再是超链接,而只是一个带有点击事件的 html 标记被捕获。 )

<a href="" onclick="alert('hello world!');return false;">My Link</a>
<a href="#" onclick="alert('hello world!');return false;">My Link</a>
<a href="MyFallbackURL.html" onclick="alert('hello world!');return false;">My Link</a>

下面是今天比较流行的使用javascript:void(0)内部href属性的设计。如果浏览器不支持脚本,它应该再次返回其页面,因为href超链接路径返回一个空字符串。如果您不在乎谁支持 JavaScript,请使用此选项。

<a href="javascript:void(0);" onclick="alert('hello world!');">My Link</a>
于 2021-03-01T18:48:59.477 回答
3

Javascript: void(0);对空值[未分配]无效,这意味着您的浏览器将NULL单击DOM,并且窗口返回 false。
'#'不遵循javascript 中的DOM 或Window。这意味着锚 href 内的 '#' 符号是LINK。链接到相同的电流方向。

于 2019-05-14T13:40:51.090 回答
2

您可以在此处使用 javascript:void(0) 而不是使用 # 来停止锚标记重定向到标题部分。

function helloFunction() {
    alert("hello world");
}
<a href="javascript:void(0)" onclick="helloFunction();">Call Hello Function</a>
于 2019-05-29T04:49:55.830 回答
0

javascript:void(0)将来会弃用,因此您应该使用#.

于 2021-06-27T10:17:40.790 回答
-2

4.0 之前的引导模式有一个基本上没有记录的行为,它们将使用 AJAXhref从元素加载 s ,a除非它们完全是#. 如果您使用的是 Bootstrap 3,javascript:void(0);hrefs 将导致 javascript 错误:

AJAX Error: error GET javascript:void(0);

在这些情况下,您需要升级到 bootstrap 4 或更改 href。

于 2017-10-04T19:47:25.140 回答