Firefox 忽略子项并在点击事件时跳转到父项

Question

以下代码无法在 Firefox 中正常运行，但在 chrome 中运行良好。

$("#parent").click(function(){
 alert("parent")
});

$("#child").click(function(){
 event.stopPropagation();
 alert("child")
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:500px;height:500px;background:red;" id="parent">
 <div style="width:200px;height:200px;background:green; font-size:200px" id="child">
 X
 </div>
</div>

当我点击child时，在firefox中触发了parent的click事件，child完全被忽略了。

我是不是漏掉了什么？

我试图找出问题所在，但主要是关于传播的问题。

Answer 1

$("#parent").click(function(e){
  if($(e.target).attr('id') == 'child'){
    //it's child
  } else {
    //its parent
  }
})

Answer 2

这是因为 event 在 Firefox 中未定义。（在其他浏览器中，它可能默认为当前事件。）

要修复它，请将 event 作为参数添加到 click 函数：

$("#parent").click(function(){
  alert("parent")
});

$("#child").click(function(event){
  event.stopPropagation();
  alert("child")
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:500px;height:500px;background:red;" id="parent">
 <div style="width:200px;height:200px;background:green; font-size:200px" id="child">
 X
 </div>
</div>

Firefox 忽略子项并在点击事件时跳转到父项

Firefox ignores child and jumps to parent on click event

firefox

jquery

cross-browser

click

parent