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);    
}); 

Fiddle

Answer 2

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

Answer 3

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

我可以更容易地更改html结构。我在锚点中嵌套了一个复选框。由于锚点是绝对定位在相对div中的，所以它可以立即工作。

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