HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>composedPath includes</title>
  <style>
    #panel {
      padding: 16px;
      border: 2px solid #333;
      margin-bottom: 12px;
    }
  </style>
</head>
<body>
  <div id="panel">
    <p>Click inside this panel</p>
    <button type="button">Panel button</button>
  </div>
  <button type="button">Outside button</button>
  <pre id="out">Waiting...</pre>
  <script>
    var panel = document.getElementById("panel");
    var out = document.getElementById("out");
    document.addEventListener("click", function (event) {
      var inside = event.composedPath().includes(panel);
      out.textContent = inside
        ? "Click was inside the panel"
        : "Click was outside the panel";
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Event.composedPath() — includes panel (Try It)