如何在 JavaScript 中禁用 href 链接？

Question

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

来自 cmets 的代码（这是生成链接的方式）

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

最简单的方法就是 element.style.pointerEvents = "none";

有人在上面提到了一些类似的东西，但不需要任何自定义 CSS - 只需直接在您的 JS 中设置样式属性，然后在/如果您想稍后重新启用它时返回“”。

Answer 2

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

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

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

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

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

• return false; ：向onevent 处理程序指示我们正在取消链接点击行为。

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

Full Working JSBin Demo.

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>

Answer 3

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

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

0)你最好记住 如果您有链接和“#”href，某些浏览器会“跳转”。所以最好的方法是自定义 JavaScript

1)如果你在自定义JavaScript之后，这里是：

<a href="#" onclick="DoSomething(); return false;">Link</a>

“return false”会阻止链接实际被关注。

2)您可以考虑避免使用以下

<a href="javascript:void(0);" onclick="DoSomething();">Link</a>

或

  <a href="javascript:;" onclick="DoSomething();">Link</a>

因为 javascript 伪协议可以在某些浏览器中使页面进入等待状态，这可能会产生意想不到的后果。 IE6 以它而闻名。但是如果您不关心 IE6，并且您正在测试所有内容 - 这可能是一个很好的解决方案。

3) 如果您的项目中已经有 jQuery 和 bootstrap，您可以考虑使用它们，如下所示：

$('.one-click').on("click", function (e) {
   $( this ).addClass('disabled');
});

.disabled 类来自引导程序。

Qupte 表单引导站点 (here)

链接功能警告

.disabled 类使用pointer-events: none 尝试禁用 s 的链接功能，但该 CSS 属性尚未标准化。此外，即使在支持指针事件的浏览器中：无，键盘导航仍然不受影响，这意味着有视力的键盘用户和辅助技术用户仍然能够激活这些链接。所以为了安全起见，在这些链接上添加一个tabindex="-1" 属性（以防止它们接收键盘焦点）并使用custom JavaScript 禁用它们的功能。

custom JavaScript 显示在 1

部分

Answer 5

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

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

Answer 6

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

我发现这种方式更容易实现。它的优点是你 js。不在您的 html 中，而是在不同的文件中。我认为没有解除绑定。这两个事件仍然活跃。不确定。但在某种程度上你只需要这个事件

Answer 7

以下禁用链接的代码：

<a href="javascript: void(0)">test disabled link</a> 

另一个非常简单的解决方案是：

<a href="#">test disabled link</a>

第一个解决方案是有效的。

Answer 8

你也可以使用 void 代替：

<a href="javascript:;">this link is disabled</a> 

Answer 9

我也有类似的需求，但我的动机是防止链接被双击。我使用 jQuery 完成了它：

$(document).ready(function() {
    $("#myLink").on('click', doSubmit);
});

var doSubmit = function() {
    $("#myLink").off('click');
    // do things here
};

HTML 如下所示：

<a href='javascript: void(0);' id="myLink">click here</a>

Answer 10

使用 jQuery 试试这个：

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

Answer 11

另一种禁用链接的方法

element.removeAttribute('href');

没有 href 的锚标记将作为禁用/纯文本反应

<a> w/o href </a>

而不是<a href="#"> with href </a>

见jsFiddel

希望这是有益的。

Answer 12

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

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 像往常一样不允许这样做:) 无论如何我都会发布这个，因为我认为这包含可能有用的信息，并且因为某些项目使用已知的浏览器，例如当您在移动设备上使用网络视图时。

如果您只想停用一个链接（我只意识到这是问题所在），我会使用一个函数来手动设置当前页面的 url，或者不根据该条件设置。 （就像你接受的解决方案）

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

Answer 13

anchor.href = null;

Answer 14

因此，上述解决方案使链接不起作用，但不要使其可见（AFAICT）链接不再有效。我遇到了一种情况，我有一系列页面并且想要禁用（并使其明显被禁用）指向当前页面的链接。

所以：

window.onload = function() {
    var topics = document.getElementsByClassName("topics");
    for (var i = topics.length-1; i > -1; i-- ) {
        for (var j = topics[i].childNodes.length-1; j > -1; j--) {
             if (topics[i].childNodes[j].nodeType == 1) {
                if (topics[i].childNodes[j].firstChild.attributes[0].nodeValue == this.n_root3) {
                    topics[i].childNodes[j].innerHTML = topics[i].childNodes[j].firstChild.innerHTML;
                }
            }
        }
    }
}

这会遍历链接列表，找到指向当前页面的链接（n_root3 可能是本地的东西，但我想document 必须有类似的东西），并用链接文本内容替换链接.

HTH

Answer 15

这也是可能的：

<a href="javascript:void(0)" onclick="myfunction()">

链接不会去任何地方，你的函数将被执行。

Answer 16

禁用链接的最简单方法就是不显示它。每当您想测试是否满足您的条件时运行此函数以隐藏上一个按钮（将if (true) 替换为您的条件）：

var testHideNav = function() {
    var aTags = document.getElementsByTagName('a'),
        atl = aTags.length,
        i;

    for (i = 0; i < atl; i++) {
        if (aTags[i].innerText == "Previous") {
            if (true) { // your condition to disable previous
                aTags[i].style.visibility = "hidden";
            } else {
                aTags[i].style.visibility = "visible";
            }
        } else if (aTags[i].innerText == "Next") {
            if (false) { // your condition to disable next
                aTags[i].style.visibility = "hidden";
            } else {
                aTags[i].style.visibility = "visible";
            }
        }
    }
};

然后在需要检查您的情况是否发生变化时运行testHideNav()。

Answer 17

谢谢大家...

以下代码解决了我的问题：

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

Answer 18

为jquery安装这个插件并使用它

http://plugins.jquery.com/project/jqueryenabledisable

它允许您禁用/启用页面中几乎任何字段。

如果你想在某些情况下打开一个页面，编写一个 java 脚本函数并从 href 调用它。如果条件满足你打开页面，否则什么都不做。

代码如下：

<a href="javascript: openPage()" >Click here</a>

and function:
function openPage()
{
if(some conditon)
opener.document.location = "http://www.google.com";
}
}

您也可以将链接放在一个 div 中，并将 Style 属性的 display 属性设置为 none。这将隐藏 div。 例如，

<div id="divid" style="display:none">
<a href="Hiding Link" />
</div>

这将隐藏链接。通过在 onclick 中调用此函数，使用按钮或图像使该 div 现在可见：

<a href="Visible Link" onclick="showDiv()">

and write the js code as:

function showDiv(){
document.getElememtById("divid").style.display="block";
}

你也可以给html标签加一个id标签，这样就可以了

<a id="myATag" href="whatever"></a>

并通过使用在您的 javascript 上获取此 id

document.getElementById("myATag").value="#"; 

其中一个必须肯定有效，哈哈

Answer 19

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

anchor.href = "#";

或者如果“禁用”还不够好，请使用事件处理程序：

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

Answer 20

当你不希望用户点击重定向时试试这个

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

Answer 21

改用 span 和 javascript onclick。如果您有链接和“#”href，某些浏览器会“跳转”。