时间戳

首页 > 解决方案 > 尝试使用 Hammerjs 以编程方式触发 WheelEvent

reactjs - 尝试使用 Hammerjs 以编程方式触发 WheelEvent

问题描述

我正在使用一个在使用鼠标滚轮时滚动的库（https://github.com/asmyshlyaev177/react-horizo ​​ntal-scrolling-menu ），我想在向左或向右滑动时使用此功能。

我正在使用hammerjs 来复制向左滑动和向右滑动的行为，这是有效的。

但是，创建 WheelEvent 似乎不会触发依赖于 WheelEvent 的功能。

我现在使用 componentDidUpdate 作为我的 react 生命周期方法，因为由于某种原因this.containerRef.current，componentDidMount 中始终为 null，但一旦我找出背后的原因，我可能会移动它。

无论如何，这是我的代码：

componentDidUpdate() {
  if(this.containerRef.current !== null) {
    this.hammer = Hammer(this.containerRef.current)
    this.hammer.on('swiperight', () => alert("swipe right"));
    var wheelevent = new WheelEvent("wheel", {deltaX: 500, deltaY: 500});
    this.hammer.on('swiperight', () => window.dispatchEvent(wheelevent));
    }
}

现在我想指出，向右滑动的警报确实发生了，所以行为肯定是触发的，但是我的 WheelEvent 没有被滚动库捕获。

我应该如何以编程方式触发 WheelEvent？

编辑 - 我做了一个关于它的代码笔：

https://codesandbox.io/s/react-horizo​​ntal-scrolling-menu-fi7tv

标签： reactjsmousewheelhammer.js

解决方案

我的预感是这个问题与Dragging被禁用和事件被取消有关。

因此，您需要将事件沿链发送一点。我已经更新了下面的代码框

https://codesandbox.io/s/react-horizo​​ntal-scrolling-menu-j46l8

更新的代码部分如下

var elem = document.getElementsByClassName("menu-wrapper")[0];
this.hammer.on("swiperight", () => elem.dispatchEvent(wheeleventRight));
this.hammer.on("swipeleft", () => elem.dispatchEvent(wheeleventLeft));

您可能希望稍后以更具反应性的方式改进该方法。但这确实表明，一旦您以低阶元素发送事件，轮播确实可以正常工作

推荐阅读