如何禁用JavaScript中的href链接？

Question

我有一个标签<a href="#"> Previous </a> 1 2 3 4 <a href="#"> Next </a>,在某些情况下我希望这个标签被完全禁用.

来自评论的代码(这是链接的生成方式)

if (n_index != n_pages) 
    a = a+'<li><a href="#" onclick="javascript:paginateAjaxPage('+(n_index+1) +','+stype+');">></a></li><li><a href="#" onclick="javascript:paginateAjaxPage('+n_pages+','+stype+');" >>></a></li>'; 
else 
    a = a+'<li><a style="cursor: pointer;" onclick="return false;">></a></li><li><a style="cursor: pointer;" onclick="return false" >>></a></li>'; 
a = a+'</ul></div>';

Answer 1

当您不希望用户重定向点击时尝试此操作

<a href="javascript: void(0)">I am a useless link</a>

Answer 2

您可以使用此样式类停用页面中的所有链接:

a {
    pointer-events:none;
}

现在当然诀窍是只在你需要时停用链接,这是怎么做的:

使用一个空的A类,如下所示:

a {}

然后,当您要停用链接时,请执行以下操作:

    GetStyleClass('a').pointerEvents = "none"

    function GetStyleClass(className)
    {
       for (var i=0; i< document.styleSheets.length; i++) {
          var styleSheet = document.styleSheets[i]

          var rules = styleSheet.cssRules || styleSheet.rules

          for (var j=0; j<rules.length; j++) {
             var rule = rules[j]

             if (rule.selectorText === className) {
                return(rule.style)
             }
          }
       }

       return 0
    }

注意:CSS规则名称在某些浏览器中转换为小写,并且此代码区分大小写,因此最好使用小写类名称

重新激活链接:

GetStyleClass('a').pointerEvents = ""

有关浏览器兼容性的信息,请查看此页面http://caniuse.com/pointer-events

我认为这是最好的方法,但遗憾的是IE,像往常一样,不会允许它:)我无论如何发布这个,因为我认为这包含可能有用的信息,并且因为一些项目使用了解浏览器就像在移动设备上使用Web视图一样.

如果你只想停用一个链接(我只是意识到这就是问题),我会使用一个函数,根据这个条件manualy设置当前页面的url.(就像你接受的解决方案)

这个问题比我想象的要容易得多:)

Answer 3

你可以简单地给它一个空哈希:

anchor.href = "#";

或者,如果"禁用"不够好,请使用事件处理程序:

anchor.href = "javascript:void(0)";

Answer 4

使用jQuery试试这个:

$(function () {
    $('a.something').on("click", function (e) {
        e.preventDefault();
    });
});

Answer 5

element.removeAttribute(attrName);当您想禁用它时，MDN 建议将属性设置为 null（或其他值）。在这种情况下，它将是element.removeAttribute("href");

https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute

Answer 6

anchor.href = null;

Answer 7

(function ($) {
    $( window ).load(function() {
        $('.navbar a').unbind('click');
        $('.navbar a').click(function () {
            //DO SOMETHING
            return false;
        });
    });
})(jQuery);

我发现这种方式更容易实现。而且它的优点是您可以使用js。不在您的html内，而是在另一个文件中。我认为没有绑定。这两个事件仍处于活动状态。不确定。但从某种意义上讲，您只需要这一事件

Answer 8

根据许多答案和我的经验，我的最佳解决方案：

<a href="javascript:">I am a useless link</a>

一些选项及其注意事项：

<a href="#">I will make you page jump to top</a> 

<a href="#" onclick="DoSomething(); return false;">I'll break others scripts events</a>

<a href="javascript: openPage()" >Please... I should be an onclick event...</a>

<a href="javascript:" onclick="openPage()" >Please...do I even need to be an anchor?</a>

<script>element.removeAttribute("href") // some browsers will remove link style</script>

<script>element.href = null // some browsers will remove link style</script>

<style>
 a.my-off-class {
    pointer-events: none
 }
 /** I disable hover event too. And... Is this a style responsability?
</style>

Answer 9

使用以下所有三个：Event.preventDefault();、Event.stopPropagation();和return false;。各自解释...

• Event.preventDefault();：停止默认的链接点击行为。

Event 接口的 PreventDefault() 方法告诉用户代理，如果事件没有得到显式处理，则不应像通常那样采取其默认操作。（来源：MDN 网络文档。）

• Event.stopPropagation();：阻止事件单击包含父级 DOM 中的链接（即，如果两个链接在 UI 中视觉上重叠）。

Event 接口的 stopPropagation() 方法可防止当前事件在捕获和冒泡阶段进一步传播。（来源：MDN 网络文档。）

• return false;：向onevent处理程序表明我们正在取消链接单击行为。

处理程序的返回值确定事件是否被取消。（来源：MDN 网络文档。）

完整工作 JSBin 演示。

StackOverflow 演示...

document.getElementById('my-link').addEventListener('click', function(e) {
  console.log('Click happened for: ' + e.target.id);
  e.preventDefault();
  e.stopPropagation();
  return false;
});

<a href="https://www.wikipedia.com/" id="my-link" target="_blank">Link</a>