stopPropagation() 和锚点？答案

【问题标题】：stopPropagation() and anchor?stopPropagation() 和锚点？
【发布时间】：2013-05-02 11:27:47
【问题描述】：

我有这个 html sn-p:

<a href="picture-big.jpg">
  <span>
    <img src="picture-small.jpg">
    <input type="checkbox" name="delete">
  </san>
</a>

还有JS部分：

$('input').click(function(e) {
  e.stopPropagation();
});

在 Mozilla 上，当我单击复选框时，它会停止传播，但仍会转到该锚点 (picture-big.jpg)。

如果我使用 return false 或 e.preventDefault() （并使用 jQuery ($('input').prop('checked', true);) 检查复选框）它不会检查输入。

想法是在没有以下链接的情况下选中复选框。在 Chrome 和 IE 上它正在工作。但不是在 Mozilla 上。

有什么想法吗？

【问题讨论】：

如果链接不应该用作链接，为什么还要在链接中添加复选框？只更改 HTML 不是最简单的吗？
Checkbox inside an anchor click behavior的可能重复
我知道标记不是最好看的。复选框仅出现在某些状态。而且它是遗留系统，因此更改某些部分并不是一件容易的事。感谢您的帮助！
相关问题：stackoverflow.com/questions/8094483/…
我认为这个问题背后有一个更普遍的问题，即如何在不触发锚本身的情况下单击锚内部的某些内容。 Andrei Nemes 在下面stackoverflow.com/a/16437392/6219628 回答了这个问题

标签： javascript jquery firefox

【解决方案1】：

我建议重组你的标记，如果这不可能，以下方法会起作用：

$('input').click(function(e) {
    e.preventDefault();
    var that = this;    
    setTimeout(function() { that.checked = !that.checked; }, 1);    
});

Fiddle

【讨论】：

这可能很明显，但你能解释一下为什么需要超时吗？（它是，没有它就不行。）
只有一个复选框才有效，如果超过1个，其余的都不起作用，例如：jsfiddle.net/04g2dzes/3
@Xao 那是因为你在复制元素 ID
是的，只是一个 PoC，不知道如何按类过滤 e obj，因此不会阻止我页面上的所有输入

【解决方案2】：

stopPropagation() 只是阻止事件在 dom 树中冒泡，这意味着父母不会收到通知，但它不会阻止默认操作的发生。您需要在代码中添加 e.preventDefault() 以阻止其导航。

【讨论】：

OP 已经声明使用preventDefault() 可以防止复选框被选中/取消选中
我见过在更改事件之前触发点击事件的情况，我认为这是特定于浏览器的。将事件处理程序更改为 change 和 preventDefault() 不应再阻止复选框更改状态。

【解决方案3】：

这是一个已知的Firefox bug。起初，我尝试用 JavaScript 方法解决它很长一段时间，直到我意识到应该是显而易见的方法：

我可以更轻松地更改 html 结构。我在锚点中有一个嵌套复选框。由于锚点是绝对定位在相对 div 中的，因此它可以立即生效。

<input type="checkbox" name="delete">
<a href="picture-big.jpg">
</a>

【讨论】：

【解决方案4】：

老问题，但如果有人需要答案。因此，如果您无法更改外部锚标记，您可以自己包装复选框，例如：

<a href="javascript:void(0);">
   <input type="checkbox">
</a>

【讨论】：