如何禁用 JavaScript 中的 href 链接?

IT技术 javascript html
2021-01-21 14:52:32

我有一个标签<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>';
6个回答

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

<a href="javascript: void(0)">I am a useless link</a>
在我看来 - Millions millions of tabs\t, line feeds\n and spaces- 是的,这使代码易于理解,而void(0)不是。这就是为什么应该删除它或必须尽可能短的原因。例如这里更短 - 是为了理解(阅读)而不是为了“压缩”或字节经济。:)
2021-03-20 14:52:32
您的 Web 开发人员放置了数百万个制表符\t、换行符\n和空格,只是为了查看折叠好的代码(为谁?浏览器),现在却在担心 7 个字节void(0)和/或;天哪。
2021-03-27 14:52:32
甚至不需要分号。
2021-03-29 14:52:32
怎么样<a href='javascript:;'>I am a shorter useless link</a>
2021-04-01 14:52:32
我有点不同意上面的评论。有时事情需要描述性,在其他情况下需要更简单、更容易记住。我更喜欢“javascript:”。
2021-04-07 14:52:32

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

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 视图一样。

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

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

我比其他人更喜欢 css 答案,因为它不需要改变链接的 href ,在我的情况下,它是动态的。
2021-03-15 14:52:32
这太棒了,但值得注意的是,11 版之前的 IE 不支持指针事件。caniuse.com/#feat= pointer-events
2021-03-22 14:52:32
我通过编辑全局样式在此页面上进行了尝试,但后来我无法投票给您 :)
2021-03-30 14:52:32
太棒了!在没有 jquery 的情况下很难找到一种方法来做到这一点。
2021-04-07 14:52:32
必须感谢pointer-events:none;我从来不知道那个标签,派上用场了!
2021-04-08 14:52:32

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

anchor.href = "#";

或者如果这还不够“禁用”,请使用事件处理程序:

anchor.href = "javascript:void(0)";
如果您的 <base> 与当前页面不同,这将不起作用
2021-03-19 14:52:32
@Bixi,1如果稍后添加,它将滚动到 ID 为的元素
2021-03-20 14:52:32
#1 不会回滚到顶部
2021-03-31 14:52:32
嗯,是的,这很明显。知道永远不要创建 id=1。这只是一个可能的解决方法
2021-03-31 14:52:32
#不推荐,为什么?考虑到这一点,您禁用的链接出现在冗长页面的底部/页脚,单击该链接会将您带到顶部,“javascript:;” 足够
2021-04-06 14:52:32

使用 jQuery 试试这个:

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

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

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

这是我见过的禁用<a>元素的最佳答案我正在寻找一种渐进式增强方法,该方法使链接能够为关闭 javascript 的用户正常工作,但禁用链接并在 javascript 可用时增强它们。data-href使用不显眼的 javascript时,删除属性(并可选择将值存储在 中)非常有效
2021-04-01 14:52:32