点击事件由滚动触发

Question

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

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

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

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

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

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

谢谢 W

回答

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

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

Answer 1

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

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

  // your code
});

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

Answer 2

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

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

当布尔值为 true 时，点击事件无法进入低谷。

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

点击事件由滚动触发

click event is triggered by scrolling

javascript

user-experience

ios

回答