如果在href
元素中触发了具有onclick
功能的元素,如何禁用a <a>
?
我试过了event.preventDefault();
,但它似乎没有做任何事情
我该如何解决这个问题?
$(function() {
$(".inside > .fa").click(function(event) {
event.preventDefault();
alert("TEST");
});
});
&#13;
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='/'>
<div class='button'>
<div class='inside'>
<i class="fa fa-globe"></i>
</div>
</div>
</a>
&#13;
答案 0 :(得分:1)
点击仍然向上冒泡。请改用event.stopPropagation();
。您在没有默认点击行为的元素上使用event.preventDefault()
,因此它什么都不做。
$(function() {
$(".inside > .fa").click(function(e) {
e.stopPropagation();
console.log(e.target);
});
});
a {
display: block; /* required otherwise you cannot have block level elements like div inside a */
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='https://google.com' target="_top">
<div class='button'>
<div class='inside'>
<i class="fa fa-globe"></i>
</div>
</div>
</a>
答案 1 :(得分:0)
尝试使用return false
代替event.preventDefault()
来停止事件冒泡
答案 2 :(得分:0)
在<a>
标记上注册您的事件监听器。并在下面进行更改。这利用了事件委派(一件好事)。
你需要这两个:
event.preventDefault();
添加强>
event.stopPropagation();
最后,您需要进行测试以确保点击的元素不是 <a>
;所以你的代码看起来像这样:
这是一个用于演示此内容的代码: