Блог

Главная - Вопросы по программированию - Добавление прослушивателя событий в окно после нажатия на кнопку

Добавление прослушивателя событий в окно после нажатия на кнопку

#javascript #reactjs #onclick #addeventlistener

Вопрос:

Итак, у меня есть img с функцией onClick

 <img className="pointer pipette-icon" src={pipetteIcon} alt="" onClick={handlePipetteClick} />

Моя цель такова: после нажатия на этот img я хочу, чтобы ничего не произошло, кроме добавления прослушивателя событий в мой документ и, скажем, регистрации чего-либо. Поэтому сначала нажмите на img, ничего не должно произойти, второй щелчок-это журнал консоли, а третий, четвертый и т. Д. Ничего не должно произойти, если я снова не нажму на img, а затем еще один щелчок должен быть журналом консоли.

Я попробовал это

 const handlePipetteClick = e => {
    document.addEventListener('click', console.log('click'));
  };

Но вход в консоль происходит при первом щелчке, как я могу этого добиться?

Ответ №1:

Так что вы просто хотите добавить listener по щелчку и удалить его тоже по щелчку.

Пожалуйста, добавьте больше кода и codesandbox или что-то подобное для следующего вопроса.

Но я нашел для тебя решение.

Вам нужно «удалить» список событий после запуска события, чтобы удалить список событий, вам нужно сохранить ту же ссылку на функцию, поэтому поместите мою функцию над прослушивателем.

Вы можете попробовать что-то вроде этого :

 const handlePipetteClick = event => {
  const onClick = () => {
    // do what you want
    console.log('click');
    // remove event
    document.removeEventListener('click', onClick);
  };
  // add event
  document.addEventListener('click', onClick);
};

Комментарии:

1. Я хотел после нажатия на img прослушать второй щелчок и только затем войти в «щелчок», в этом решении вход происходит при нажатии на img :/

2. Совсем не мужчины. Как можно отобразить журнал до определения события 😮

3. Вы вызываете эту функцию выше onClick на изображении, журнал с отображается при возникновении события документа.

Ответ №2:

Из вашего вопроса я понял, что даже при щелчках вы хотите получить журнал консоли.

 let clicked = 0;

const handlePipetteClick = e => {
    let onClick = function(){
    clicked  ;
        if(clicked ==2){
            console.log("click");
            clicked=0;
        }
    }
    document.addEventListener('click', onClick);
};
Метки: