javascript - 如何禁用带有 javascript 和 css 的链接？

Question

您知道如何仅为用户禁用链接吗？我有

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

所以想法是链接 /search/Banana 是一个有效的链接，我想为搜索索引引擎保留它。但是，我希望当用户单击链接时，调用函数 searchoffertext_selected 并且什么也没发生。

Answer 1

要阻止链接执行其默认操作，请添加return false;到onclick事件中：

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

onclick直接放在上面可能是一个更好的主意<a>

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

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

Answer 2

使用 jQuery：

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

VanilaJS：

<a onclick="return false;">

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>

Answer 4

HTML

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

CSS

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

.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);
}