Question

以下代码无法在Firefox中运行，但它在chrome中运行得非常好。

＆＃13;

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

＆＃13;

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

＆＃13;

当我点击子项时，在firefox中触发了父项的click事件，完全忽略了该子项。

我错过了什么吗？

我试图找到问题，但主要是有关传播的问题。

Answer 1

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

要解决此问题，请将event作为参数添加到click功能：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

Firefox忽略子项并在点击事件

2 个答案: