点击事件由滚动触发

问题描述

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

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

问题是当我在 IOS (iphone) 上滚动时 - 触摸这个元素开始滚动，触发事件监听器。

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

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

---

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

谢谢

---

答案

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

我添加了一个媒体查询，只允许 :focus 用于台式机或以上尺寸的设备，从而解决了问题。

解决方法

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

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

  // your code
});

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

,

我在 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
  }
})