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()到代码中以阻止其导航。