Я пытаюсь понять, что определяет порядок срабатывания обработчиков событий при нажатии вложенного <div>
- то, что я вижу, похоже, противоречит документированному поведению, поэтому я ищу небольшую помощь для понимания он.
У меня есть 2 вложенных divs, и у меня есть 2 обработчика событий, прикрепленных к каждому, один для фазы захвата и один для фазы барботирования:
<html>
<head>
<script>
function setup(){
var outer = document.getElementById('outer');
outer.addEventListener('click', function(){console.log('outer false');}, false);
outer.addEventListener('click', function(){console.log('outer true');}, true);
var inner = document.getElementById('inner');
inner.addEventListener('click', function(){console.log('inner false');}, false);
inner.addEventListener('click', function(){console.log('inner true');}, true);
}
</script>
<style>
div {
border: 1px solid;
padding: 1em;
}
</style>
</head>
<body onload="setup()">
<div id="outer">
<div id="inner">
CLICK
</div>
</div>
</body>
</html>
В соответствии с тем, что я прочитал, вывод должен быть:
outer true
inner true
inner false
outer false
но то, что я на самом деле вижу (в Chrome и Firefox):
outer true
inner false
inner true
outer false
Может ли кто-нибудь объяснить несоответствие?