如果执行onclick，我该如何禁用HREF？

Question

我有一个带有同时设置了HREF和ONCLICK属性的锚点。如果单击并启用了Javascript，则希望它仅执行ONCLICK并忽略HREF。同样，如果禁用或不支持Javascript，则希望它遵循HREF URL并忽略ONCLICK。以下是我的示例代码，它会同时执行JS并跟随链接（通常是先执行JS然后再切换页面）：

<A HREF="http://example.com/no-js-login" ONCLICK="yes_js_login()">Log in</A>

如何最好地做到这一点？

我希望得到一个JavaScript的答案，但只要有效，我也接受任何方法，特别是如果可以使用PHP完成。我已经阅读了"a href链接在javascript onclick函数能够完成之前执行并重定向页面"，但它仅延迟了HREF，并没有完全禁用它。我还在寻找更简单的方法。

- Ky -

---

在页面上，我想使用两个锚点，一个带有href属性，一个不带。在页面加载时检查JavaScript是否启用，如果启用，则显示正确的锚点，否则显示另一个。 - ewein

@ewein 为什么要这样做？这对于一个简单的功能来说，听起来需要大量的标记。 - Ky -

Answer 1

如果你在onclick属性中先添加return，那么你可以使用第一个未编辑的解决方案：

<a href="https://example.com/no-js-login" onclick="return yes_js_login();">Log in</a>

yes_js_login = function() {
     // Your code here
     return false;
}

例子：https://jsfiddle.net/FXkgV/289/

- elproduc3r

---

在过去的几年里，我改变了主意；这是一个更好的解决方案。 - Ky -

多么健康！ - DrunkDevKek

但是这在JSX React中不起作用。这会有效吗？ - Coder

这节省了很多时间。 - Mark Lozano

Answer 2

    yes_js_login = function() {
         // Your code here
         return false;
    }

如果你返回 false，它应该阻止默认操作（跳转到 href）。

编辑：抱歉，那个方法似乎不起作用，你可以尝试以下方法代替：

<a href="http://example.com/no-js-login" onclick="yes_js_login(); return false;">Link</a>

- Chris Bier

---

修改后的答案并没有回答问题，因为它删除了实际链接。 - Itai Bar-Haim

您可以选择使用 onclick="return yes_js_login();"，其中 yes_js_login 返回 false。 - Uwe Kleine-König

@cgogolin 请看我的回答。 - Gabe Rogan

对于仍然遇到问题的人，可以添加这行代码 event.stopImmediatePropagation() - didxga

Answer 3

使用preventDefault来禁用默认浏览器行为，并在HTML中传递事件(event)。

<a href=/foo onclick= yes_js_login(event)>Lorem ipsum</a>

yes_js_login = function(e) {
  e.preventDefault();
}

- Buksy

---

返回 false 在 Polymer 中无效... 上述解决方案有效... 谢谢 - Paras Sachapara

Answer 4

您可以使用这个简单的代码：

<a href="" onclick="return false;">add new action</a><br>

- Michail M.

Answer 5

<a href="http://www.google.com" class="ignore-click">Test</a>

使用jQuery：

<script>
    $(".ignore-click").click(function(){
        return false;
    })
</script>

使用JavaScript

<script>
        for (var i = 0; i < document.getElementsByClassName("ignore-click").length; i++) {
            document.getElementsByClassName("ignore-click")[i].addEventListener('click', function (event) {
                event.preventDefault();
                return false;
            });
        }
</script>

你可以将类名.ignore-click分配给任意数量的元素，这些元素上的点击事件将被忽略。

- Andrew

---

这是一个很棒的解决方案！我用它来处理按钮，当点击时会添加一个伪类.btn-loading到被点击的链接上，然后如果成功，就会用一个勾号（在出错时是一个X）替换加载动画。在某些情况下，我不希望按钮能够再次被点击（无论是成功还是出错），使用这个方法，我可以简单地使用$(elemnent).addClass('disabled')轻松实现我想要的功能，而且非常优雅！ - Matthew Mathieson

我不知道为什么我的代码不起作用？var modal_button = document.querySelectorAll('[href="#bookingform"]'); if(modal_button.length){
for (var i = 0; i < modal_button.length; i++) { modal_button[i].addEventListener('click',function(e){ // 一些代码 e.preventDefault(); return false; }); } } - Duc Manh Nguyen

Answer 6

如果您像这样传递事件参数，则更简单：

<a href="#" onclick="yes_js_login(event);">link</a>

function yes_js_login(e) {
    e.stopImmediatePropagation();
}

- Trigon219

---

那对我没用。我必须使用e.preventDefault()。 - Milan Simek

onclick="event.stopImmediatePropagation();" 对我有效。 - la_petite_kozel

Answer 7

尝试使用以下代码作为javascript:void(0)-

<a href="javascript:void(0)" onclick="...">文本</a>

- user3765825

---

感谢您的贡献。这并没有解决我在原始问题中提出的情况：“如果单击并启用了Javascript，则希望它仅执行ONCLICK并忽略HREF。同样，如果禁用或不支持Javascript，则希望它遵循HREF URL并忽略ONCLICK。” - Ky -

Answer 8

这可能会有所帮助。 不需要 JQuery。

<a href="../some-relative-link/file" 
onclick="this.href = 'https://docs.google.com/viewer?url='+this.href; this.onclick = '';" 
target="_blank">

这段代码的作用如下：

1. 将相对链接传递给Google文档查看器
2. 通过this.href获取锚点的完整链接版本
3. 在新窗口中打开链接。

因此，在您的情况下，这可能有效：

<a href="../some-relative-link/file" 
onclick="this.href = 'javascript:'+console.log('something has stopped the link'); " 
target="_blank">

- marlo

Answer 9

我解决了一个问题，需要一个模板来处理常规URL或JavaScript调用的<a>元素，其中js函数需要引用调用<a>元素。在JavaScript中，“this”仅在表单元素（例如按钮）的上下文中作为自我引用工作。我不想要一个按钮，只是一个常规链接的外观。

示例：

<a onclick="http://blahblah" href="http://blahblah" target="_blank">A regular link</a>
<a onclick="javascript:myFunc($(this));return false" href="javascript:myFunc($(this));"  target="_blank">javascript with self reference</a>

href和onClick属性具有相同的值，只是在JavaScript调用时我会在onClick后附加"return false"。在被调用的函数中使用"return false"并不起作用。

- Bo Johanson

---

为什么有两个？为什么要把JS放在HREF中？ - Ky -

Supuhstar，实际代码是动态的JavaScript，并将为定义在外部的数百个项目生成一个<a>元素。每个项目都将指定一个静态链接地址，这就是生成的<a>元素应该使用常规的“href行为”的地方。或者，为该项指定了一个JavaScript函数调用，在这种情况下，根据元素的上下文计算<a>元素的行为。 在<a>生成器的代码中，我只想复制为每个元素指定的内容，而不测试它是链接地址还是JavaScript函数调用。 - Bo Johanson

我不明白这怎么回答我的问题。谁说我想要几百个链接？我真的不明白这一切的意义，甚至你刚才说的一半都不懂。 - Ky -

Answer 10

在我的情况下，当用户点击“a”元素时，我有一个条件。该条件是：

如果其他部分有超过十个项目，则不应将用户重定向到其他页面。

如果其他部分少于十个项目，则应将用户重定向到其他页面。

“a”元素的功能取决于其他组件。单击事件中的代码如下：

var elementsOtherSection = document.querySelectorAll("#vehicle-item").length;
if (elementsOtherSection> 10){
     return true;
}else{
     event.preventDefault();
     return false;
}

- Jorge Santos Neill