反应：滚动时忽略 onClick 事件-y答案

【问题标题】：React : ignore the onClick event when scrolling-y反应：滚动时忽略 onClick 事件-y
【发布时间】：2021-10-26 19:16:54
【问题描述】：

我正在使用embla-carousel 插件创建一个轮播，我想在水平滚动时忽略链接到另一个页面的onClick 事件。

【问题讨论】：

标签： javascript node.js reactjs angularjs event-handling

【解决方案1】：

您可能正在寻找名为 embla.clickAllowed() 的 Embla 选择加入方法。我不知道你使用的是 VanillaJS 还是 ReactJS 版本的 Embla。无论如何，示例用法看起来是这样的：

const onSlideClick = useCallback((index) => {
  if (!embla || !embla.clickAllowed()) return

  // Embla says the pointer interaction was a static click, and not a drag move.
  // Do your magic here...
}, [embla])

<div className="embla__container">
  {slides.map((slide, index) => {
    <div className="embla__slide" onClick={() => onSlideClick(index)}>
      ...
    </div>
  })}
</div>

它是如何工作的

如果指针触摸，Embla 将：

当手势是拖动移动时防止点击。
在滚动过程中点击轮播时防止点击。

如果指针是鼠标，Embla 将：

当手势是拖动移动时防止点击。
在滚动过程中点击轮播时不阻止点击。

这种设计选择背后的原因是触摸指针滚动文档。当文档在触摸设备上原生滚动时，它会阻止点击，直到用户停止滚动并在完成后再次点击。

但鼠标指针不用于滚动文档，除非您拖动滚动条。而且，如果您拖动滚动条，它将防止您意外单击网页上的任何内容，因为指针位于滚动条区域内。所以这里的假设是我们可以更加确定鼠标指针的点击是有意的。

链接

embla.clickAllowed()here 的 API 参考。
文档网站here 上有关如何使用 Embla 实现点击事件的指南。

【讨论】：