115

我有一个同时 HREF设置和ONCLICK属性的锚。如果单击并启用了 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 完成。我已经阅读了“ a href 链接在 javascript onclick 功能能够完成之前执行并重定向页面”，但它只是延迟HREF，但并没有完全禁用它。我也在寻找更简单的东西。

4

10 回答 10

72

如果您将 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/

于 2014-03-28T21:14:21.350 回答
63 
    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>
于 2013-03-25T18:41:36.580 回答
41

只需在 HTML 中使用preventDefault并传递默认浏览器行为即可。event

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

yes_js_login = function(e) {
  e.preventDefault();
}
于 2016-05-23T13:56:56.990 回答
19 
<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您喜欢的尽可能多的元素，并且单击这些元素将被忽略

于 2015-12-20T22:21:23.967 回答
15

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

<a href="" onclick="return false;">add new action</a><br>
于 2016-04-26T06:36:09.027 回答
6

如果传递这样的事件参数会更简单：

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

function yes_js_login(e) {
    e.stopImmediatePropagation();
}
于 2015-06-05T17:32:30.923 回答
5

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

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

于 2020-12-01T09:11:37.503 回答
2

这可能会有所帮助。 不需要 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

  1. 通过以下方式获取锚点的完整链接版本this.href
  2. 打开新窗口的链接。

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

<a href="../some-relative-link/file" 
onclick="this.href = 'javascript:'+console.log('something has stopped the link'); " 
target="_blank">
于 2013-11-15T05:04:34.900 回答
1

我解决了我需要一个模板来处理常规 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”不起作用。

于 2014-08-18T09:24:55.213 回答
0

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

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

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

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

var elementsOtherSection = document.querySelectorAll("#vehicle-item").length;
if (elementsOtherSection> 10){
     return true;
}else{
     event.preventDefault();
     return false;
}
于 2017-10-11T19:40:01.923 回答