禁用HREF并执行功能

Question

我有此代码：

<a href="link.cshtml">
    <div>...</div>
    <div class="function">...</div>
    <div>....</div>
</a>

我希望在DIV上使用类功能禁用HREF，并在我单击此Div时调用功能

我已经尝试了onclick="return false; testFunction();"，但显然不起作用。

有人可以帮我吗？

预先感谢

Answer 1

1. 您应该使用preventDefault来确保浏览器不会运行默认的href。
2. 如果您return-此后什么都不会运行...

function testFunction() {
  alert('hi');
}
document.querySelector('.function').addEventListener('click', function() {
  event.preventDefault();
  testFunction();
});

<a href="https://www.yahoo.com">
    <div>...</div>
    <div class="function">Click here will not change page</div>
    <div>....</div>
</a>

Answer 2

另一种使其与javascript:void(0)进行的方式，然后通过jQuery

单击事件

$(".function").click(function(){
 console.log("test")
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:void(0)">
    <div>...</div>
    <div class="function">Click here will not change page</div>
    <div>....</div>
</a>

Answer 3

$('#selector').on('click', function(e) {
  e.preventDefault();
  alert("Cool!");
});

Answer 4

您可以做到这一点：

$('#content a').click(function(){ return false });

从单击事件处理程序返回false可防止默认行为（按照链接）。

如果您可能有一个以上的链接，但只想禁用此链接，则可能在选择器中更具体：

$('#content a[href="/test/"]').click(function(){ return false });