点击事件由滚动触发答案

【问题标题】：click event is triggered by scrolling点击事件由滚动触发
【发布时间】：2021-02-18 21:12:16
【问题描述】：

在我的 js 代码中，我有一个非常简单的事件监听器来监听点击 -

element.addeventlistener('click', ()=>{
#do somthing
})

问题是当我在 IOS (iphone) 上滚动时 - 触摸此元素以启动滚动，会触发事件侦听器。

有没有办法阻止 iphone 上的事件侦听器，除非没有滚动跟随？

即如果单击但不滚动则执行某些操作

或者，这可能是一个完全不同的解决方案（但我试图避免使用库）

谢谢 W

回答

按照所述查看下面给出的答案（确实有效）后，此问题仍然存在。这让我有理由查看我的 CSS，我发现在 IOS 移动设备 (iphone) 上 - CSS psudo 选择器 :focus 在您滚动项目时被激活。

我添加了一个媒体查询，只允许:focus 在桌面设备或以上设备上使用，这解决了这个问题。

【问题讨论】：

标签： javascript ios user-experience

【解决方案1】：

我在 Stackoverflow 中找到了另一个问题的可能解决方案：Question

基本上，您会在窗口中添加一个滚动侦听器。然后，这将在滚动时将名为 disable_click_flag 的全局布尔值设置为 true。如果用户没有滚动至少 250 毫秒，它将被设置为 false。

当布尔值为真时，点击事件无法通过。

var disable_click_flag = false;
var timeout = null;

window.addEventListener('scroll', () => {
  disable_click_flag = true;

  if(timeout) clearTimeout(timeout);
  
  timeout = setTimeout(function(){ disable_click_flag = false }, 250);
}

element.addeventlistener('click', () => {
  if(disable_click_flag === false{
    #do somthing
  }
})

【讨论】：

【解决方案2】：

我不是专家，但我会尝试：

var prevScroll = pageYOffset;
window.addEventListener("scroll", () => prevScroll = pageYOffset);
window.addEventListener("click", (e) => {
  if (pageYOffset !== prevScroll) return;

  // your code
});

请注意，此代码未经测试，但我认为它应该可以工作。

【讨论】：

注意：pageYOffset与window.pageYOffset相同