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>
Источник

1 ответ

Я думаю, вы не поняли 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() не удалось бы:

    • Когда имена методов неверны: проверьте консоль, зарегистрировано ли там что-то подобное.
    • Когда метод не завершен успешно. Проверьте, выходит ли исполнение за пределы stopPropagation() печатая выписки из журнала.
Источник
Другие вопросы по тегам