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视图时。

如果您只是想停用一个链接（我只是意识到这就是问题），我会使用一个根据该条件手动设置当前页面的URL的功能。（就像你接受的解决方案一样）

这个问题比我想象的要容易得多：）

Answer 3

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

anchor.href = "#";

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

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

Answer 4

使用jQuery试试这个：

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

Answer 5

anchor.href = null;

Answer 6

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

我发现这种方式更容易实现。它有你的优势。不是在您的HTML中，而是在不同的文件中。我认为没有解开。这两个事件仍然有效。不确定。但在某种程度上，你只需要这一个事件

Answer 7

禁用链接的最简单方法就是不显示它。每当您想测试是否符合条件时，请运行此函数以隐藏上一个按钮（将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 8

这也是可能的：

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

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

Answer 9

使用span和javascript代替。如果你有一个链接和“＃”href。

，有些浏览器会“跳”

Answer 10

因此，上述解决方案使链接无效，但不会使链接不再有效（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 11

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

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

Answer 12

我有类似的需求，但我的动机是防止链接被双击。我用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 13

基于许多答案和我在这里的经验，我的最佳解决方案：

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

使用以下所有三个：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 15

您也可以使用：

而不是无效

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

Answer 16

禁用链接的另一种方法

element.removeAttribute('href');

没有href的

锚标记会作为禁用/纯文本反应

<a> w/o href </a>

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

请参阅jsFiddel

希望这是有益的。

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";
}

您还可以将id标记放入html标记，因此它将是

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

使用

在您的JavaScript上获取此ID

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

其中一项必须确保哈哈

Answer 19

0）你最好记住这一点一些浏览器＆＃34;跳跃＆＃34;如果你有一个链接＆＃34;＃＆＃34; HREF。因此，最好的方法是自定义JavaScript

1）如果您在自定义JavaScript 之后，请执行以下操作：

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

＆＃34;返回false＆＃34;阻止链接实际被跟踪。

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类来自bootstrap。

Qupte表单引导站点（here）

链接功能警告

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

，custom JavaScript显示在 1

部分

Answer 20

以下禁用链接的代码：

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

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

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

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

如何禁用JavaScript中的href链接？

20 个答案: