HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>stop compare</title>
  <style>
    #wrap { padding: 12px; border: 2px solid #333; display: inline-block; }
    button { display: block; margin: 6px 0; }
  </style>
</head>
<body>
  <div id="wrap">
    parent div<br>
    <button id="allow" type="button">allow propagation</button>
    <button id="stopPropagation" type="button">stop propagation</button>
    <button id="stopImmediatePropagation" type="button">immediate stop</button>
  </div>
  <pre id="out">Click a button...</pre>
  <script>
    var out = document.getElementById("out");
    var wrap = document.getElementById("wrap");

    wrap.addEventListener("click", function () {
      out.textContent += "parent heard click\n";
    });

    ["allow", "stopPropagation", "stopImmediatePropagation"].forEach(function (id) {
      var btn = document.getElementById(id);
      for (var i = 1; i <= 3; i++) {
        (function (n) {
          btn.addEventListener("click", function (evt) {
            if (n === 1) out.textContent = "";
            if (n === 1 && id !== "allow") {
              evt[id]();
              out.textContent += "handler 1 called " + id + "()\n";
            }
            out.textContent += "Click event " + n + " on \"" + btn.textContent + "\"\n";
          });
        })(i);
      }
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Event.stopImmediatePropagation() — three-way compare (Try It)