Как решить не удалось удалить EventListener? - PullRequest
Новая
       54

Как решить не удалось удалить EventListener?

0 голосов
/ 08 октября 2018

Я хочу остановить eventListener после завершения функции, вот иллюстрация:

Я сделал значок, и при нажатии на него будет отображаться input form, а затем, когда мой курсор clicked или mouseover он показывает поиск button снова под этим вводом, но когда я нажимаю снова и снова, поиск кнопок продолжает добавлять кнопки элементов ниже,

Вот код: 

 let FunFun = document.querySelector( "img#pic" ).addEventListener( "click", () => {
     let newEl = document.createElement("input");
      newEl.id   = "inPut"
      newEl.type = "text";
      newEl.name = "foo";
      newEl.value = "";
      newEl.placeholder  = "type your city";
     let oldEl = document.querySelector("#pic")

     //parentEL
     let parentEl = document.querySelector( ".addCity" )
      parentEl.replaceChild( newEl, oldEl )

     let btN = document.querySelector( "#inPut" ).addEventListener( "click", () => {
       btN = document.createElement( "button" )
       btN.class = "btn0"
       btN.textContent = "search"
       let _input  = document.querySelector("#inPut")
       _input.after(btN)
// tried wrote  code removeEventListener also, but nothing error and cant make the event stop

      }) end the btN

      // console.log(btN)

   // let buttnRm = document.querySelector("#inPut").removeEventListener("click", () => {  console.log("test" )});

    }) // end  the FunFun

Мой код выше не был ошибкой на консоли, и я попытался поместить обработчик removeEven ниже функции btN, он получил ошибку, как и код выше,

Я попытался сделать код, подобный этомудля функции выше: 

.addEventListener("click", myFunction, true) // false

.removeEventListener("click", myFunction, true) // false

я переключаю true и false выше, но все еще ничего

некоторые изображения кнопок все больше и больше отображаются, когда я нажимаю элемент формы input после моегофункция addeventlistener рабочая

this is when I clicked the input form for times, it keep adding buttons, over

before click / mousenter on input form

1 Ответ

0 голосов
/ 08 октября 2018

Невозможно удалить прослушиватели анонимных событий

Сначала вам нужно объявить функцию eventHandler в качестве прослушивателя событий, а затем удалить еес помощью removeEventListener

let eventHandler = () => {
   btN = document.createElement( "button" )
   btN.class = "btn0"
   btN.textContent = "search"
   let cityInput = document.querySelector( "#inPut" )
   cityInput.after(btN)

   // Remove the eventListener just after the first call
   cityInput.removeEventListener('click' , eventHandler, true)
}

Выберите элемент ввода и сохраните его как переменную. 

let cityInput = document.querySelector( "#inPut" ); // select the input element
cityInput.addEventListener( "click", eventHandler, true) // add a non-anonymous function as event listener


let FunFun = document.querySelector( "img#pic" ).addEventListener( "click", () => {
 let newEl = document.createElement("input");
  newEl.id   = "inPut"
  newEl.type = "text";
  newEl.name = "foo";
  newEl.value = "";
  newEl.placeholder  = "type your city";
 let oldEl = document.querySelector("#pic")

 //parentEL
 let parentEl = document.querySelector( ".addCity" )
  parentEl.replaceChild( newEl, oldEl )

let eventHandler = () => {
   btN = document.createElement( "button" )
   btN.class = "btn0"
   btN.textContent = "search"
   cityInput.after(btN)

   cityInput.removeEventListener('click' , eventHandler, true)
}

let cityInput = document.querySelector( "#inPut" );
cityInput.addEventListener( "click", eventHandler, true) // end the btN
 
  // console.log(btN)

// let buttnRm = document.querySelector("#inPut").removeEventListener("click", () => {  console.log("test" )});

}) // end  the FunFun
#pic {
  height: 100px;
  width: 100px;
  border: 1px solid;
}
<div class='addCity'>
  <img src='something.jpg' id='pic'>
</div>
...