Usando Javascript, ¿cómo elimina una sola función de un detector de eventos de "clic", después del primer evento de clic, cuando se usan varias funciones en el elemento con el detector de eventos de "clic"? Aquí, después del primer clic, solo debe permanecer toggleView( toggleView() y renderList() debe eliminarse.
const button = document.getElementById("view_button"); button.addEventListener("click", () => { toggleView(); // want to keep this indefinitely renderList(); // want to remove this after the first click button.removeEventListener("click", renderList); });Debe agregar ambos por separado y especificar { once: true } en el que desea eliminar después de la primera ejecución.
Ver MDN :
once
Un valor booleano que indica que el agente de escucha debe invocarse como máximo una vez después de agregarse. Si es verdadero, el detector se eliminará automáticamente cuando se invoque.
function toggleView() { console.log('toggleView'); } function renderList(evt) { console.log('renderList'); } const button = document.getElementById("view_button"); button.addEventListener("click", toggleView); button.addEventListener("click", renderList, { once: true }); <button type="button" id="view_button">Click</button>Puede agregar dos detectores de eventos y eliminar uno
function toggleView() { console.log('toggleView'); } function renderList(evt) { evt.currentTarget.removeEventListener("click", renderList); console.log('renderList'); } const button = document.getElementById("view_button"); button.addEventListener("click", toggleView); button.addEventListener("click", renderList); <button type="button" id="view_button">Click</button>o simplemente puede agregar lógica para determinar si se debe ejecutar la función.
function toggleView() { console.log('toggleView'); } function renderList() { console.log('renderList'); } const button = document.getElementById("view_button"); button.addEventListener("click", () => { toggleView(); if (!button.dataset.clicked) { renderList(); button.dataset.clicked = '1'; } }); <button type="button" id="view_button">Click</button>Usaría un cierre aquí para realizar un seguimiento de si se ha hecho clic en el elemento.
const button = document.getElementById("view_button"); function toggleView() { console.log('Toggle View'); } function renderList() { console.log('Render List'); } function clickHandler() { let hasBeenClicked = false; return function () { toggleView(); if (!hasBeenClicked) { renderList(); hasBeenClicked = true; } }; } button.addEventListener("click", clickHandler()); <button id="view_button" type="button">View Button</button>