stopPropagation not working when calling two functions

javascript reactjs stoppropagation

96 观看

1回复

1781 作者的声誉

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>
作者: CraZyDroiD 的来源 发布者: 2017 年 9 月 15 日

回应 1


0

747 作者的声誉

I guess you misunderstood stopPropagation().

  1. 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.

  2. 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>

``

  1. [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.
作者: vishwarajanand 发布者: 2017 年 9 月 15 日
32x32