如何使用JavaScript和CSS禁用链接?

Question

您知道如何仅为用户禁用链接吗？我有一个需要隐藏的链接，只有特定的用户才能访问它。

<div class="searchoffertext" onclick="searchoffertext_selected('Banana')"><a href="./search/Banana">Banana</a></div>

这个想法是/link/Banana是一个有效的链接，我希望将其保留给搜索引擎进行索引。但是，当用户点击链接时，希望调用函数searchoffertext_selected并且不发生其他事情。

- Tigran

---

你想让用户看到重定向页面吗？如果不需要，为什么要将其保留在锚标签中？最好使用按钮代替。 - AKIWEB

仅供搜索引擎使用。我不知道它们如何处理ajax数据。 - Tigran

Answer 1

为了阻止链接执行默认操作，需要在onclick事件中添加return false;：

<div class="searchoffertext" onclick="searchoffertext_selected('Banana'); return false;"><a href="./search/Banana">Banana</a></div>

更好的做法是直接在<a>标签上添加onclick事件。

但更好的方法是使用不侵入式JavaScript通过选择器将事件附加到链接上。

另请参阅：Stackoverflow：何时在HTML中使用onclick？

- AJ W

Answer 2

使用jQuery：

$('#selector').click(function(e){
  e.preventDefault();
});

VanilaJS:

<a onclick="return false;">

- Mohamad

---

做这么基本的事情没有必要加载jQuery。 - j08691

但是...不够的jQuery - rink.attendant.6

我很感激，但是我确实提供了一个原生JS的解决方案。 - Mohamad

真的，但是return false !== preventDefault() - rink.attendant.6

Answer 3

尝试一下？

js

document.querySelectorAll('.searchoffertext > a').onclick = function(e) {
  e.preventDefault();
  searchoffertext_selected(this.getAttribute("data-fruit"));
}

html

<div class="searchoffertext">
    <a href="./search/Banana" data-fruit="Banana">Banana</a>
</div>

- Ozzy

---

div 的 click 事件没有默认操作被执行。 - rink.attendant.6

@rink.attendant.6 你知道事件冒泡吗？我不确定答案是否被编辑过，但选择器是 .searchoffertext > a，所以这里没有 div 事件。 - Ian

答案已被编辑，之前没有 > a。 - rink.attendant.6

@Ian 是的，我最初漏掉了 > a，但在 rink 的评论差不多同时加上了它。 - Ozzy

选择器后面缺少[0]，即...querySelectorAll('.searchoffertext > a')[0].onclick。这是因为，与万能的jQuery不同，东西不会自动应用于整个元素列表。 - frnhr

@frnhr 你是对的。我想你可以用一个for循环来包围它，并使用索引来达到预期的效果。 - Ozzy

Answer 4

HTML

<div class="searchoffertext" onclick="searchoffertext_selected('Banana')">
    <a href="./search/Banana">Banana</a>
</div>

CSS

使用pointer-events，但是在IE 11之前的版本中不支持。

.searchoffertext > a {
    pointer-events: none;
}

JavaScript

当链接被点击时，{{防止默认动作执行：}}

var links = document.querySelectorAll('.searchoffertext > a'), i;
for(i = 0; i < links.length; i += 1) {
    links[i].addEventListener('click', function(e) {
        e.preventDefault();
    }, false);
}

- rink.attendant.6