Tengo algunos problemas al intentar obtener el atributo de datos de cualquier elemento html.
El problema es que obtengo el atributo de datos en el 30% de los casos. El resto regresa indefinido.
Esto es lo que quiero activar:
document.addEventListener("DOMContentLoaded",() => { document.body.addEventListener("click",(e) => { console.log("clicked"); console.log(e.target.dataset.link + " is the link clicked") // this is returning undefined most of the times. if (e.target.dataset.link !== undefined) { console.log("got the link") navigateTo(e.target.dataset.link); } }) // router(); }) <div class="cell" data-link="/dashboard/posts" tabindex="1"> <i class="material-icons">assignment</i> <span>Posts</span> </div>Como es esto posible ?
¿Y cómo puedo prevenir esto?
No puedo eliminar el detector de eventos onclick para el cuerpo.
event.target es el elemento al que se dirigió el evento, que puede estar dentro de su elemento data-link (como i y span en su div ). Puede usar el método closest con un selector de presencia de atributos ( [attribute-name] ) para encontrar el elemento data-link :
const dataElement = e.target.closest("[data-link]"); Eso verifica e.target para ver si coincide con el selector de CSS y, si no lo hace, mira a su padre para ver si coincide, y así sucesivamente hasta que llega a la raíz del documento. Si llega hasta la raíz sin encontrarla, devuelve null .
Fragmento actualizado:
document.addEventListener("DOMContentLoaded",() => { document.body.addEventListener("click",(e) => { const dataElement = e.target.closest("[data-link]"); if (!dataElement) { return; // There wasn't one } console.log(dataElement.dataset.link + " is the link clicked") // this is returning undefined most of the times. if (dataElement.dataset.link !== undefined) { console.log("got the link") // navigateTo(dataElement.dataset.link); } }) // router(); }) <div class="cell" data-link="/dashboard/posts" tabindex="1"> <i class="material-icons">assignment</i> <span>Posts</span> </div>Sin embargo , tenga en cuenta el comentario de evolutionxbox . Está recreando la funcionalidad web básica utilizando elementos no semánticos y código JavaScript. Eso destruye la accesibilidad de su página, e incluso para los usuarios que no confían en la tecnología de asistencia, les hace imposible usar las funciones avanzadas de su navegador para (digamos) abrir el enlace en una nueva pestaña, etc.
Adjunte el detector de eventos al cuerpo del documento. Es absolutamente normal que no obtenga el conjunto de datos: puede hacer clic fuera de la celda o en un elemento dentro de esto.
Debe adjuntar el evento a los elementos deseados con el atributo data-link :
document.addEventListener("DOMContentLoaded", () => { document.querySelectorAll('[data-link]').forEach(node => { node.addEventListener("click", (e) => { console.log("clicked"); console.log(node.dataset.link + " is the link clicked") }) }) }) <div class="cell" data-link="/dashboard/posts"> <i class="material-icons">assignment</i> <span>Posts</span> </div> <div class="cell"> <i class="material-icons">assignment</i> <span>Posts</span> </div>