Tengo una clase llamada ContextMenu y está hecha para reemplazar el menú contextual predeterminado que muestra el navegador cada vez que haces clic derecho en la página.
Este menú necesita algunos eventListeners aplicados a sus elementos secundarios.
<div id="contextmenu" class="hidden"> <ul> <li id="download-file" class="action">Download</li> <li id="rename-file" class="action">Rename</li> <li id="delete-file" class="action">Delete</li> <li id="details-file" class="action">Details</li> </ul> </div>este es el html para el menú contextual
export default class ContextMenu { contextMenu events actions selectedItem constructor(HTMLContextMenu) { this.contextMenu = HTMLContextMenu window.document.onmousedown = (event) => this.show(event) this.events = ['click', 'touchstart'] this.actions = window.document.querySelectorAll('.action') // all elements that have to trigger an eventListener have the class "action" for (const event in this.events) { this.actions[0].addEventListener(event, this.download, false) this.actions[1].addEventListener(event, this.rename, false) this.actions[2].addEventListener(event, this.delete, false) this.actions[3].addEventListener(event, this.details, false) } this.selectedItem = null }este es el javascript, no pegué toda la clase, solo lo que es relevante para el problema. Como puede ver, el bucle for in se ocupa de los eventListeners aplicando 8 oyentes en total. El problema es que cada vez que hago clic en el elemento no pasa nada.
He encontrado el problema. El ciclo for (const event in this.events) es incorrecto, tiene que ser for (const event of this.events) para que funcione.
for (const event of this.events) { this.actions[0].addEventListener(event, this.download, false) }Como dijo iQucik , está usando la palabra clave incorrecta en su ciclo. En caso de que esté utilizando objetos iterables, debe usar una palabra clave; de lo contrario, use una palabra clave para objetos enumerables.
Algunas referencias:
Bucle for-of de MDN Docs: MDN Docs for..of
Bucle for-in de MDN Docs: MDN Docs for..in
export default class ContextMenu { contextMenu events actions selectedItem constructor(HTMLContextMenu) { this.contextMenu = HTMLContextMenu window.document.onmousedown = (event) => this.show(event) this.events = ['click', 'touchstart'] this.actions = window.document.querySelectorAll('.action') // all elements that have to trigger an eventListener have the class "action" for (const event of this.events) { this.actions[0].addEventListener(event, this.download, false) this.actions[1].addEventListener(event, this.rename, false) this.actions[2].addEventListener(event, this.delete, false) this.actions[3].addEventListener(event, this.details, false) } this.selectedItem = null } <div id="contextmenu" class="hidden"> <ul> <li id="download-file" class="action">Download</li> <li id="rename-file" class="action">Rename</li> <li id="delete-file" class="action">Delete</li> <li id="details-file" class="action">Details</li> </ul> </div>