stopPropagation не работает при вызове двух функций

У меня есть определенный div, а сверху есть еще одно изображение. Я дал методы onClick как для моего div, так и для изображения. Я хотел остановить запуск метода onClick, указанного для приведенного ниже div, при нажатии на изображение, которое находится поверх div.

Я смог остановить это, используя e.stopPropagation();. Но позже мне пришлось добавить еще один метод к onClick изображения. После его добавления мой e.stopPropagation(); перестал работать. Как я могу это исправить.

Когда код работал

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>

Когда код перестал работать

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>

reactjs javascript stoppropagation
person CraZyDroiD    schedule 15.09.2017    source источник
comment
Почему вы не можете объединить код обеих функций?   -  person shyammakwana.me    schedule 15.09.2017
comment
хорошо, я объединил это. Но проблема осталась..   -  person CraZyDroiD    schedule 15.09.2017
comment
вы передали e функции?   -  person shyammakwana.me    schedule 15.09.2017

Ответы (1)


arrow_upward
0
arrow_downward

Я думаю, вы неправильно поняли stopPropagation().

  1. Вам необходимо реализовать пользовательскую логику, если вы хотите остановить распространение кода с enlarge() на passImage(). Допустим, enlarge() устанавливает переменную, которую passImage() проверяет перед выполнением.

  2. Если вы действительно хотели остановить распространение выполнения с onClick внутреннего div на внешний div, у меня это работает. Ниже приведен снимок кода, который вы также можете протестировать.

``

<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. [Советы по отладке] Я могу придумать несколько возможных ситуаций, когда ваш stopPropagation() выйдет из строя:

    • When method names are incorrect: check console whether something like that is logged there.
    • Когда метод не завершается успешно. Проверьте, выходит ли выполнение за пределы stopPropagation(), распечатав операторы журнала.
person vishwarajanand    schedule 15.09.2017