stopPropagation not working when calling two functions

Question

stopPropagation not working when calling two functions

889 Views Asked by CraZyDroiD At 04 April 2025 at 12:13

I have a certain div and top of that there's another image. I have given onClick methods for both my div and image. I wanted to stop firing the onClick method given for the below div when clicking on the image that is on top of the div.

I was able to stop it using e.stopPropagation(); .But later i had to add another method to the onClick of the image. After adding it, my e.stopPropagation(); stopped working. How can i fix this.

When the code worked

enlarge() {

        if (!e) var e = window.event;
        e.cancelBubble = true;
        if (e.stopPropagation) e.stopPropagation();

        this.setState({
            showFullImage: true,
        });

    }


<div onClick={() => this.handleClick(content.post_poll_content_id)}>
       <div className="float_right full_div" onClick={this.enlarge}>
          <img src={extend} className="extend_icon" />
      </div>
</div>

When the code stopped working

enlarge() {

        if (!e) var e = window.event;
        e.cancelBubble = true;
        if (e.stopPropagation) e.stopPropagation();

        this.setState({
            showFullImage: true,
        });


    }

    passImage(img){

        if (!e) var e = window.event;
        e.cancelBubble = true;
        if (e.stopPropagation) e.stopPropagation();

        this.setState({

            img:img

        })

    }

<div onClick={() => this.handleClick(content.post_poll_content_id)}>
    <div className="float_right full_div" onClick={()=>{this.enlarge();this.passImage(content.content);}}>
         <img src={extend} className="extend_icon" />
    </div>
</div>

Original Q&A

There are 1 best solutions below

**vishwarajanand** · Answer 1

I guess you misunderstood stopPropagation().

You need to implement a custom logic, if you want to stop propagation of code from enlarge() to passImage(). Lets say enlarge() sets a variable which passImage() validates before execution.
If you really meant to stop propagation of execution from onClick of inner div to the outer div, it works for me. Following is a code snapshot you can test too.

``

<html>
   <head>
   <script>
     function click_innermostdiv1(){
            event.stopPropagation();
            alert("click_innermostdiv1 : innermostdiv was clicked.");
     }

     function click_innermostdiv2(){
            event.stopPropagation();
            alert("click_innermostdiv2 : innermostdiv was clicked.");
     }

     function click_outermostdiv(){
            alert("The outermostdiv element was clicked.");
     }

     function click_middlediv(){
            alert("The middlediv element was clicked.");
     }
   </script>
   </head>
   <body>
      <div style="height:100px;width:500px;padding:10px;border:1px solid blue;background-color:lightblue;" onClick="click_outermostdiv();">
         This is outermost div element.
         <div style="background-color:pink" onClick="click_middlediv();">
            This is middle div element. <br>
            <div style="background-color:orange" onClick="click_innermostdiv1();click_innermostdiv2();">
                  This is a innermost div element.
            </div>
         </div>
      </div>
   </body>
</html>

``

[Debugging hints] I can think of a few possible situations when your stopPropagation() would fail are:
- When method names are incorrect: check console whether something like that is logged there.
- When method does not complete successfully. Check whether execution goes beyond stopPropagation() by printing log statements.

stopPropagation not working when calling two functions

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in REACTJS

Related Questions in STOPPROPAGATION

Trending Questions

Popular # Hahtags

Popular Questions