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/

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

4 个答案: