DOM 更改停止触摸事件侦听器

Question

我在 DOM 更改时停止工作的 React 触摸事件处理有问题。我有一个带有 onTouchMove 处理程序的父项。如果我在该元素上方开始我的触摸移动，并且在触摸移动期间消失的子元素将停止调用我的处理程序。

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

（要测试触摸事件，您需要使用响应式设计模式并在 Chrome 或 Firefox 中启用触摸事件）父级 div（绿色）有 onTouchMove 处理程序，如果您在蓝色子级 div 之外开始触摸，一切正常，但如果您在蓝色 [=13] 中启动它=]，当这个消失时（当你的光标 x 超过代码中的某个阈值时）触摸处理程序停止被调用。

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

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.onTouchMove = this.onTouchMove.bind(this);
    this.state = {
      touchCurrentX: 0
    }
  }

  onTouchMove(ev) {
        console.log('onTouchMove');
        const x = ev.touches.item(0).screenX;
            this.setState({touchCurrentX: x});
  }

  render() {
    const child = this.state.touchCurrentX < 600 ? React.createElement('div', {key: 0, id: 'child'}, []) : null;
    const debug = React.createElement('span', {key: 1}, this.state.touchCurrentX);
    return React.createElement('div', {id: 'parent', onTouchMove: this.onTouchMove}, [child, debug]);
  }
}

ReactDOM.render(React.createElement(TodoApp, {}, []), document.querySelector("#app"))

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

Answer 1

实现此目的的最简单方法是让触摸事件通过 children 落到 parent 上。只需将 style: { pointerEvents: "none" } 添加到 child 道具或将其添加到您的 CSS。然而，这不是一个完美的解决方案。一些 children 可能需要他们的指针事件和 IE 可能 object 到 CSS 属性.

DOM 更改停止触摸事件侦听器

DOM changes stop touch event listeners

touch

reactjs

ontouch