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>

Когда я щелкаю по дочернему элементу, в firefox запускается событие щелчка родительского элемента, дочерний элемент полностью игнорируется.

Я что-то пропустил?

Я пытался найти проблему, но есть в основном проблемы, связанные с распространением.

Answer 1

Это потому что 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>

Answer 2

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