javascript – 如何阻止元素内部链接上的click()

我不知道如何标题这个问题,但让我解释一下.我有一个包含内容,链接和内部复选框的框.如果您单击框中的任意位置,它将标记复选框.如果单击链接,它也会执行此操作.如果单击链接而不是框,如何禁用对框的检查？ (令我感到困惑,请参阅下面的代码段)

$("div").on("click",function() {
  var $checkBox = $(this).find(":checkBox");
  $checkBox.prop("checked",!$checkBox[0].checked);
});

div {
  width: 300px;
  padding: 20px;
  margin: auto;
  background: #999;
  color: #FFF;
}
input {
  display: block;
  height: 50px;
  width: 50px;
  margin: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Mauris sit amet urna risus. Maecenas egestas pellentesque sapien blandit hendrerit. Morbi tellus felis,elementum ut ligula eu,convallis luctus ante. <a href="https://www.google.com" target="_blank">Nulla molestie mollis aliquam.</a> Maecenas
    nisl nulla,fringilla et placerat vitae,tempus ut urna.</p>
  <input type="checkBox" name="check[]" class="check">
</div>

解决方法

您需要附加到< a>的点击处理程序上的 event.stopPropagation().根据定义,

It prevents further propagation of the current event in the bubbling phase.

这是工作片段.

$("div").on("click",!$checkBox[0].checked);
});

$('.my-link').click(function(e) {
    e.stopPropagation();
});

div {
  width: 300px;
  padding: 20px;
  margin: auto;
  background: #999;
  color: #FFF;
}
input {
  display: block;
  height: 50px;
  width: 50px;
  margin: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p>Lorem ipsum dolor sit amet,convallis luctus ante. <a class="my-link" href="https://www.google.com" target="_blank">Nulla molestie mollis aliquam.</a> Maecenas
    nisl nulla,tempus ut urna.</p>
  <input type="checkBox" name="check[]" class="check">
</div>