Breaking News: Grepper is joining You.com. Read the official announcement!

now add stopPropagation()

Asim Ehmedov answered on February 1, 2022 Popularity 10/10 Helpfulness 8/10

answer now add stopPropagation()

related stopimmediatepropagation vs stoppropagation

now add stopPropagation()

Comment

<!DOCTYPE html>
<html>
<head>
  <title>Event Propagation Example with stopPropagation()</title>
</head>
<body>

  <div id="outer">
    <div id="middle">
      <div id="inner">
        <button id="btn">Click Me!</button>
      </div>
    </div>
  </div>

  <script>
    // Event handler for the outer div
    function outerHandler() {
      console.log("Outer div clicked!");
    }

    // Event handler for the middle div
    function middleHandler(event) {
      console.log("Middle div clicked!");
      event.stopPropagation(); // Stop propagation here
    }

    // Event handler for the inner div
    function innerHandler(event) {
      console.log("Inner div clicked!");
      event.stopPropagation(); // Stop propagation here
    }

    // Event handler for the button
    function buttonHandler() {
      console.log("Button clicked!");
    }

    // Add event listeners to the elements
    document.getElementById("outer").addEventListener("click", outerHandler);
    document.getElementById("middle").addEventListener("click", middleHandler);
    document.getElementById("inner").addEventListener("click", innerHandler);
    document.getElementById("btn").addEventListener("click", buttonHandler);
  </script>
</body>
</html>

Popularity 10/10 Helpfulness 8/10 Language html

Source: chat.openai.com

Tags: add html

Link to this answer
Share Copy Link

Contributed on Jun 16 2023

Asim Ehmedov

0 Answers Avg Quality 2/10

Closely Related Answers

stopimmediatepropagation vs stoppropagation

Comment

-1

<!---- stopImmediatePropagation() vs stopPropagation() ----------------->

`stopPropagation` allows other event handlers on the SAME ELEMENT 
on the SAME EVENT to be executed, while `stopImmediatePropagation`
prevents this.

<script>
el.addEventListener( "click", e => e.stopImmediatePropagation() )
el.addEventListener( "click", e => console.log("This will not run.") )
</script>

<!----------------- stopImmediatePropagation() vs stopPropagation() ---->

Popularity 9/10 Helpfulness 5/10 Language html

Source: Grepper

Tags: html

Link to this answer
Share Copy Link

Contributed on Feb 01 2022

KostasX

0 Answers Avg Quality 2/10

now add stopPropagation()

Contents

More Related Answers

now add stopPropagation()

Closely Related Answers

stopimmediatepropagation vs stoppropagation

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.