如何禁用javascript和css的链接？

Question

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

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

所以想法是链接/搜索/香蕉是一个有效的链接，我想保留它用于搜索索引引擎。但是，我想当用户点击链接时，调用了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>

上可能更好一点

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

另请参阅：Stackoverflow: When to use onclick in HTML?

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，但这是unsupported in versions of IE older than 11。

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

的JavaScript

单击链接时执行

Prevent the default action：

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