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

Posted 2023-03-05

【中文标题】如果执行 onclick，如何禁用 HREF？

【英文标题】：How can I disable HREF if onclick is executed?

【发布时间】：2013-03-15 08:45:18

【问题描述】：

我有一个 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 link executes and redirects page before javascript onclick function is able to finish”，但它只会延迟HREF，但并没有完全禁用它。我也在寻找更简单的东西。

【问题讨论】：

我会用一个带href的锚和一个不带href的锚。在页面加载时检查是否启用了 javascript，如果它显示正确的锚点，则显示另一个。

@ewein 为什么？对于一个简单的功能来说，这听起来像是大量的标记。

【参考方案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/

【讨论】：

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

多么有益健康！

但这不适用于 JSX 反应。这行得通吗？

这节省了很多时间。

【参考方案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>

【讨论】：

编辑后的答案没有回答问题，因为它删除了实际链接。

或者使用onclick="return yes_js_login();" 和yes_js_login 返回false

@cgogolin 看到我的回答。

对于仍然卡住的任何人，可以添加此行event.stopImmediatePropagation()

【参考方案3】：

只需使用 preventDefault 禁用默认浏览器行为并在 html 中传递 event。

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

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

【讨论】：

return false 在聚合物中不起作用...上述解决方案确实有效...谢谢

【参考方案4】：

<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 类分配给您喜欢的任意数量的元素，点击这些元素将被忽略

【讨论】：

这是一个很好的解决方案！我将它用于我拥有的按钮，当单击伪类.btn-loading 时将其添加到单击的链接中，然后如果成功，则复选标记（错误时为 X）将替换加载动画。我不希望在某些情况下（成功和错误）再次单击按钮，使用它我可以简单地$(elemnent).addClass('disabled') 并以优雅的方式轻松实现我正在寻找的功能！

不知道为什么我的代码不起作用？ var modal_button = document.querySelectorAll('[href="#bookingform"]'); if(modal_button.length) for (var i = 0; i

【参考方案5】：

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

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

【参考方案6】：

如果你像这样传递一个事件参数会更简单：

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

function yes_js_login(e) 
    e.stopImmediatePropagation();

【讨论】：

这对我不起作用。我必须使用 e.preventDefault()

【参考方案7】：

尝试使用javascript:void(0)如下-

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

【讨论】：

感谢您的参与。这无助于我在原始问题中提出的方案：“如果单击并启用了 Javascript，我希望它只执行 ONCLICK 并忽略 @987654324 @。同样，如果 Javascript 被禁用或不受支持，我希望它遵循 HREF URL 并忽略 ONCLICK。"

【参考方案8】：

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

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

此代码执行以下操作： 将相对链接传递给Google Docs Viewer

通过this.href获取主播完整链接版 在新窗口中打开链接。

所以在你的情况下这可能有效：

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

【参考方案9】：

我解决了我需要一个模板来处理常规 URL 或 javascript 调用的元素，其中 js 函数需要对调用元素的引用。在 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 属性具有相同的值，除了我在 onClick 上附加“return false”时，它是一个 javascript 调用。在被调用函数中“返回 false”不起作用。

【讨论】：

为什么有两个？为什么要把 JS 放在HREF 里？

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

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

【参考方案10】：

就我而言，当用户单击“a”元素时，我遇到了一个条件。条件是：

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

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

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

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