logo标签列表

如何阻止在元素内部点击链接的click()事件

javascriptjqueryhtml
3

我不确定如何命名这个问题，但让我解释一下。我有一个包含内容、链接和复选框的框。如果你点击框中的任何位置，它都会标记复选框。如果你点击链接，它也会这样做。如何禁用勾选框，如果你点击链接，而不是框呢？（很困惑，看下面的代码片段）

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

问得好！！ - T.J. Crowder
尝试在JavaScript中使用preventDefault()方法。这可以防止对象的默认功能被执行。 - Dale
2
我很困惑你为什么把“被接受”的答案从Jivan更改成了Rohit416的？它们实际上是相同的答案，只不过Jivan早些时候发布了它。显然，你可以自由选择接受任何答案，我只是想问一下是否有误解...？ - T.J. Crowder
1
我完全同意@T.J.Crowder的观点，如果它们都能达到相同的目的，那么切换是没有意义的。如果你（楼主）可以暗示一下切换背后的实际情况，那就更好了，这样可以澄清意图！ - Rohit416
@T.J.Crowder 很难解释，因为代码有点深入，但基本上当用户点击框内时，它要么将X添加到一个变量中，要么根据复选框是否被选中进行减法运算。如果你点击框内的链接，复选框不会被选中（你的答案已经修复了这个问题），但由于我点击了链接（在框内），它进行了减法运算。为了解决这个问题，我添加了 $('.my-link').click(function(e) { e.stopPropagation(); }); - Garrettj944
3个回答
6

通过使用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>

哦，令人印象深刻 :) - Rohit416
4
我猜在链接的点击处理程序中使用一个好老式的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>

2
您需要在附加到 <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>

你实际上是我的情况下的胜者（T.J. Crowder 也是正确的）。非常感谢你。 - Garrettj944
我个人喜欢@T.J.Crowder的回答。当我写作时，我不知道其他答案的到来，你可以看到其中一些正在做同样的事情。如果块中除了a之外还有其他类型的元素，并且您可以在它们上面应用相同的类，也许使用不同且更有意义的名称，那么添加类将为您带来优势。就是这样。 - Rohit416
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接