Question

我有一些带子项的父导航项目，我不需要父项目可点击。

他们看起来像这样：

<a href="parent">Parent Item</a>

是否有针对具有<a>特定类的.parent标记，并使其无法点击？

Answer 1

如果有人对Pure CSS解决方案感兴趣（因为这个问题被标记为CSS），那么你可以使用pointer-events: none;

a[href="parent"] {
    cursor: default;
    pointer-events: none;
}

Demo

支持

enter image description here

^{致谢：Mozilla Developer Network}

Answer 2

使用：

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

Answer 3

如果你想避免使用jQuery库，没有它就一样容易：

var disabled = document.querySelector('.parent');
disabled.addEventListener('click', function(e) {e.preventDefault();}, false);

Answer 4

另一个纯CSS选项是用绝对定位的“封面”覆盖链接：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">

.parent {position: relative; z-index: -1;}
.parent:after {content: ""; position: absolute; top:0; right: 0; bottom: 0; left: 0;}

</style>
</head>
<body>

<a href="http://google.com" class="parent">Disabled Link</a>
<a href="http://google.com">Normal Link</a>

</body>
</html>

Answer 5

您可以在主体上放置一个侦听器，而不是每个.parent上的侦听器。以下内容适用于所有正在使用的浏览器，无需任何库支持：

function stopClickOnParentClass(evt) {
  var el = evt.target || evt.srcElement;
  if (/(^|\s)parent(\s|$)/.test(el.className)) {
    evt.preventDefault();
    return false;
  }
}

然后：

<body onclick="stopClickOnParent(event);" …>

您还可以通过将类传递给函数并从中构建正则表达式来使类动态化。

如何制作<a> tags with a class unclickable?</a>

5 个答案: