DOM更改会停止触摸事件监听器

Question

我遇到React触摸事件处理问题，当DOM更改时，该事件停止工作。我有一个带有menuItems.filter(item => item.status).forEach((item) => { // The filter function will remove any items where item.status is falsy, // leaving only items where status is true. console.log('Do something') }) 处理程序的父项。如果我在此元素上方开始触摸运动，并且子元素在触摸运动过程中消失，那么我的处理程序将不再被调用。

我在那儿转载：https://codepen.io/anon/pen/pmRvmB?editors=0110#0

（要测试触摸事件，您需要使用自适应设计模式并在Chrome或Firefox中启用触摸事件） 父级onTouchMove（绿色）具有div处理程序，如果您在蓝色子级onTouchMove外部开始触摸，则一切正常，但是如果您在蓝色{{1 }}，当这个消失时（当光标div超过代码中的某个阈值时），触摸处理程序将停止调用。

以下是重现此问题的相应JS代码：

div

即使子元素消失，有没有办法让我的处理程序仍然被调用？

Answer 1

实现此目的的最简单方法是让触摸事件通过子级落入父级。只需将style: { pointerEvents: "none" }添加到子道具或将其添加到CSS中即可。但是，这不是一个完美的解决方案。一些孩子可能需要他们的指针事件，而IE可能会反对CSS属性。