javascript - 单击包含的复选框时如何防止打开href url

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>

但这不起作用。单击复选框时，详细信息页面仍会打开...

对此有什么建议吗？？

标签： javascriptjqueryhtml

Answer 1

您可以尝试这种方式：

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

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