Question

我有这段代码：

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

我想用class函数禁用div上的href，并在点击这个div时调用一个函数。

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

有人能帮助我吗？

提前致谢

Answer 1

您应该使用preventDefault确保浏览器不会运行默认href。
如果你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点击事件

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

禁用href和执行功能

4 个答案: