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复选复选框（$（＆＃39; input＆＃39;）。prop（＆＃39; checked＆＃39;，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>

Answer 4

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

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

stopPropagation（）和锚？

4 个答案:

Fiddle