When capturing didn't work in chrome

Event capturing

by jshacker

HTML

<section id="outerMost">
  <div id="mid">
    <p id="innerMost">Click me! and check console.</p>
  </div>
</section>

CSS

section,
div,
p {
  border: thin solid red;
  padding: 20px;
  margin: 20px;
}

JavaScript

var innerMost = document.getElementById("innerMost")
innerMost.addEventListener(
  "click",
  function (e) {
    console.log("clicked:", e.target.id)
  },
  true,
)
var mid = document.getElementById("mid")
mid.addEventListener(
  "click",
  function (e) {
    console.log("clicked:", e.target.id)
  },
  true,
)
var outerMost = document.getElementById("outerMost")
outerMost.addEventListener(
  "click",
  function (e) {
    console.log("clicked:", e.target.id)
  },
  true,
)