如何禁用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>上可能是個更好的主意

但更好的方法是使用不顯眼的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);
}