禁用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 }); 

从Click事件处理程序返回false阻止默认行为（链接如下）。

如果你可以有一个以上的链接，但要禁用只有这一个，你可能在你的选择更具体：

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