Tengo un Toggle que muestra contenido. Estoy tratando de eliminar su evento de clic en más de 600 px de la vista del navegador. Eso significa que la funcionalidad de alternar clic no debería funcionar en una vista más grande de 600 px. El siguiente es el código que usé.
HTML:
<div class="trigger">Trigger</div> <div class="content">This is the Toggle Displaying content</div> let trigger = document.querySelector(".trigger"); let content = document.querySelector(".content"); mobilefunction=(el)=>{ let cs = window.getComputedStyle(el).display; if(cs==="none") {el.style.display="block"} else {el.style.display="none";} } responsivemenu=()=> { let windowwidth = window.innerWidth; if(windowwidth < 500) { trigger.addEventListener("click", ()=>{mobilefunction(content)}); } else { trigger.removeEventListener("click", ()=>{mobilefunction(content)}); } } window.addEventListener("resize", responsivemenu ); responsivemenu();Estoy tratando de habilitar el evento Click solo en dispositivos móviles y eliminarlo para escritorio. Buscando ayuda de expertos en esto. ¡Gracias de antemano!
Recomendaría no agregar/eliminar el eventlistener, sino simplemente verificar dentro de la devolución de llamada del oyente. Al hacer esto, puede eliminar todas las cosas del controlador de cambio de tamaño, ya que el ancho se valida en el momento en que hace clic.
let trigger = document.querySelector(".trigger"); let content = document.querySelector(".content"); mobilefunction = () => { if (window.innerWidth >= 500) { return; } let cs = window.getComputedStyle(content).display; if (cs === "none") { content.style.display = "block" } else { content.style.display = "none"; } } trigger.addEventListener("click", mobilefunction); <div class="trigger">Trigger</div> <div class="content">This is the Toggle Displaying content</div>