仅在特定浏览器视图中删除点击事件

Question

我有一个显示内容的开关。我试图在大于 600 像素的浏览器视图中删除它的点击事件。这意味着切换点击功能不应该在 600 像素的大视图中工作。以下是我使用的代码。

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();

我正在尝试仅在移动设备上启用 Click 事件，并在桌面设备上将其删除。求高手帮忙解决这个问题。提前致谢！

Answer 1

我建议不要 add/remove 事件监听器，而只是检查监听器回调内部。通过这样做，您可以删除所有调整大小处理程序的内容，因为宽度在您第二次单击时得到验证。

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>

仅在特定浏览器视图中删除点击事件

Remove Click Event only in a specific browser view

javascript

click

removeeventlistener