Ich habe ein Array von NodeList. Ich durchlaufe jedes NodeList-Element und füge einen Klickereignis-Listener hinzu.

var itemsList = document.querrySelectorAll('.items');
itemList.forEach(item => {
   item.addEventListener('click', () => {
       console.log('clicked');
   })
})

Sobald ich auf eines der Elemente geklickt habe, möchte ich den Ereignis-Listener auch für alle anderen Elemente entfernen. Es spielt keine Rolle, ob jedes Element angeklickt wird oder nicht.

0
Karunamay Murmu 8 Feb. 2020 im 08:45

4 Antworten

Beste Antwort

Um es direkt ohne jQuery oder irgendetwas zu machen und ohne es zu komplizieren, könnten Sie so etwas tun:

const itemsList = document.querySelectorAll('.items');

const onClick = () => {
  console.log('clicked');
  itemsList.forEach(item => {
    item.removeEventListener('click', onClick);
  });
};

itemsList.forEach(item => {
  item.addEventListener('click', onClick);
});

Grundsätzlich behalten Sie einen Verweis auf die Klickfunktion bei, und die Funktion selbst entfernt sich von allen Knoten in der Liste.

Wenn Sie wissen möchten, auf welches Element geklickt wurde, können Sie der Funktion onClick einen Parameter hinzufügen. Dies ist das Klickereignis, von dem Sie das angeklickte Element wie folgt abrufen können:

const itemsList = document.querySelectorAll('.items');

const onClick = event => {
  const clickedItem = event.target
  console.log('clicked on ' + clickedItem.textContent);

  itemsList.forEach(item => {
    item.removeEventListener('click', onClick);
  });
};

itemsList.forEach(item => {
  item.addEventListener('click', onClick);
});

Mit etwas in dieser Richtung erhalten Sie einen Verweis darauf, auf welches Element tatsächlich geklickt wurde.

1
Eric F. 8 Feb. 2020 im 06:51

Sie können dies ausdrucksvoller machen

var itemsList = document.querrySelectorAll('.items');

const updateClickListener = (list, callback, operation = 'add') => {
  itemList.forEach(item => {
    item[`${operation}EventListener`]('click', () => {
        callback();
        updateClickListener(list, () => {}, 'remove');
    })
  })
}

updateClickListener(
 list, 
 () => {
   console..log('clicked');
});

0
Aivan Monceller 8 Feb. 2020 im 05:55

Ein Ansatz besteht darin, den Listener einem Vorfahren Ihrer Elemente hinzuzufügen, d. H. document + einer Zielprüfung, auf welches Element geklickt wurde. Wenn Sie diesen Listener entfernen müssen, müssen Sie ihn nur einmal entfernen

function handleClick(event) {
  if (event.target.classList.contains("items")) {
    alert(event.target.textContent)
    document.removeEventListener('click', handleClick)
  }
}

document.addEventListener('click', handleClick);
    <div id="app">
      <li class="items">1</li>
      <li class="items">2</li>
      <li class="items">3</li>
      <li class="items">4</li>
      <li class="items">5</li>
    </div>
0
Mauricio Poppe 8 Feb. 2020 im 06:09

Dies ist mit jquery sehr präzise

var handler=function(){
   //your logic of click event
   alert('clicked')
}

// handle click and add class
$('.items').on("click", function(){
  handler();
  $('.items').not(this).off("click");
})

Dadurch werden alle anderen Klickereignisse nach dem Klicken auf das erste entfernt. Wenn Sie jedes Ereignis einschließlich des ersten Klicks entfernen möchten, entfernen Sie die Methode not() aus meinem Code

0
Nithin Chandran 8 Feb. 2020 im 06:05