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

时间:2013-03-25 18:28:47

标签: html onclick anchor href

我有一个锚 HREFONCLICK属性设置。如果点击并启用了Javascript,我希望执行ONCLICK并忽略HREF。同样,如果Javascript被停用或不受支持,我希望它遵循HREF网址并忽略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,但不会完全禁用它。我也在寻找更简单的东西。

10 个答案:

答案 0 :(得分:56)

    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>

答案 1 :(得分:36)

如果您首先在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/

答案 2 :(得分:27)

只需使用preventDefault停用默认浏览器行为,然后在HTML中传递event

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

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

答案 3 :(得分:11)

您可以使用以下简单代码:

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

答案 4 :(得分:5)

如果你传递一个这样的事件参数,它会更简单:

<a href="#" onclick="yes_js_login(event);">link</a>
function yes_js_login(e) {
    e.stopImmediatePropagation();
}

答案 5 :(得分:1)

这可能会有所帮助。 不需要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. 获取锚点的完整链接版本
  3. 打开新窗口的链接。
  4. 所以在你的情况下,这可能有效:

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

答案 6 :(得分: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属性具有相同的值,exept我在onClick上追加“return false”,这是一个javascript调用。在被调用的函数中“返回false”不起作用。

答案 7 :(得分:0)

这对我有用:

<a href="" onclick="return false;">Action</a>

答案 8 :(得分:0)

在我的情况下,当用户点击&#34; a&#34;元件。条件是:

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

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

&#34; a&#34;的功能元素取决于其他组件。点击事件中的代码如下:

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

答案 9 :(得分:0)

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

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