如果执行 onclick,如何禁用 HREF?

IT技术 javascript html onclick anchor href
2021-02-11 01:42:59

我有一个同时 设置HREFONCLICK属性的锚点如果单击并启用 Javascript,我希望它只执行ONCLICK并忽略HREF. 同样,如果 Javascript 被禁用或不受支持,我希望它遵循HREFURL 并忽略ONCLICK. 下面是我正在做的一个例子,它会执行 JS 并同时跟踪链接(通常是执行 JS 然后页面更改):

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

这样做的最佳方法是什么?

我希望得到一个 Javascript 答案,但我会接受任何有效的方法,特别是如果这可以用 PHP 完成。我已经阅读了“在 javascript onclick 功能能够完成之前,href 链接执行并重定向页面”,但它只是延迟HREF,但并没有完全禁用它。我也在寻找更简单的东西。

6个回答

您可以使用第一个未编辑的解决方案,如果您将 return 首先放在onclick属性中:

<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/

在过去的几年里,我改变了主意;这是一个更好的解决方案
2021-03-15 01:42:59
这节省了很多时间。
2021-03-22 01:42:59
多么健康!
2021-03-27 01:42:59
但这不适用于 JSX react。这会奏效吗?
2021-04-12 01:42:59
    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>
@cgogolin 看到我的回答。
2021-03-17 01:42:59
或者onclick="return yes_js_login();"yes_js_login返回一起使用false
2021-03-26 01:42:59
对于仍然卡住的任何人,可以添加此行 event.stopImmediatePropagation()
2021-03-28 01:42:59
编辑后的答案不回答问题,因为它删除了实际链接。
2021-04-03 01:42:59

只需使用preventDefaultevent在您的 HTML 中传递默认浏览器行为即可

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

yes_js_login = function(e) {
  e.preventDefault();
}
return false 在聚合物中不起作用......上述解决方案确实有效......谢谢
2021-03-18 01:42:59
<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')轻松地以优雅的方式实现我正在寻找的功能!
2021-04-08 01:42:59
我不知道为什么我的代码不起作用?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错误的; }); } }
2021-04-10 01:42:59

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

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