单击包含的复选框时如何防止打开href网址

Question

我有一个对象（商店，建筑物等）框，周围是指向对象详细信息页面的href链接。 在此框内是对象信息和用于为该对象添加书签的复选框。

因此，在单击复选框时，应将对象添加为书签（防止href单击）。 在该框中单击其他任何位置时，应打开详细信息页面。

简单示例：

$(".func_prevent").click(function(e) {
    $(this).closest('a').preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="/details.php">
   <div class="box bg-image">
      <p>My Object title</p>
      <p>my text</p>
      <p><input type="checkbox" class="func_prevent" name="bookmark"> bookmark object</p>
    </div>
</a>

但这是行不通的。 单击复选框时，详细信息页面仍会打开。

有什么建议吗？

Answer 1

您应该使用e.stopPropagation(); 而不是$(this).closest('a').preventDefault();

Answer 2

尝试这个

$(".func_prevent").click(function(e) {
    e.stopPropagation();
});

防止事件使DOM树冒泡，从而防止任何父处理程序收到该事件的通知。

Answer 3

$("a").click(function() {
    return false;
});

“返回假”将调用“ .preventDefault（）”和“ .stopPropagation（）”，而不是“ .stopImmediatePropagation（）”。 因此，它停止了事件冒泡。

如果不想影响其他链接，也可以尝试连接到类或id。

Answer 4

您可以这样尝试：

$("a").on('click', '.func_prevent', function(e){
    e.stopPropagation();
});
$("a").click(function(e) {
    e.preventDefault();
});

JSFiddle： https ://jsfiddle.net/vh4jtrg3/14/