如何阻止元素内部链接上的click（）

Question

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

 $("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> 

Answer 1

通过使用event.target检查点击是否通过链接到达div路径：

$("div").on("click", function(event) {
  if ($(event.target).closest("a").length) {
      // It travelled through a link, don't do anything
  } else {
    var $checkbox = $(this).find(":checkbox");
    $checkbox.prop("checked", !$checkbox[0].checked);
  }
});

更新的代码段：

 $("div").on("click", function(event) { if ($(event.target).closest("a").length) { // It travelled through a link, don't do anything } else { 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> 

Answer 2

我猜good'ol stopPropagation在链接的点击处理程序会做的伎俩。

$("div a").on("click", function(e) {
  e.stopPropagation();
});

这可以防止您的点击冒泡到div。

更新的代码段：

 $("div").on("click", function(event) { var $checkbox = $(this).find(":checkbox"); $checkbox.prop("checked", !$checkbox[0].checked); }); $("div a").on("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, 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> 

Answer 3

你需要在附加到<a> click处理程序上使用event.stopPropagation（） 。 根据定义，

它阻止了当前事件在起泡阶段的进一步传播。

这是工作片段。

 $("div").on("click", function() { var $checkbox = $(this).find(":checkbox"); $checkbox.prop("checked", !$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, 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 class="my-link" 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> 

Answer 4

这可以通过使用event.target.nodeName来实现

$("div").on("click", function(event) {
if(event.target.nodeName.toLowerCase() === 'a')
   return false;
else{
   var $checkbox = $(this).find(":checkbox");
   $checkbox.prop("checked", !$checkbox[0].checked);  
 }
});

这是链接

希望能帮助到你 ：）