javascript - stopPropagation() 和锚点？

Question

我有这个 html 片段：

<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 上。

有任何想法吗？

Answer 1

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

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

小提琴

Answer 2

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

Answer 3

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

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

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

Answer 4

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

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