Изменения DOM слушателей событий Stop Touch - PullRequest
Новая
       12

Изменения DOM слушателей событий Stop Touch

1 голос
/ 14 мая 2019

У меня проблема с обработчиками сенсорных событий React, которые перестают работать при изменении DOM.У меня есть родительский элемент с обработчиком onTouchMove.Если я начну движение касания над этим элементом и дочерним элементом, который исчезнет во время движения касания, мой обработчик перестанет вызываться.

Я воспроизвел там: https://codepen.io/anon/pen/pmRvmB?editors=0110#0

(Для проверки событий касания вынеобходимо использовать режим адаптивного дизайна и включить сенсорные события в Chrome или Firefox) Родитель div (зеленый) имеет обработчик onTouchMove, все работает нормально, если вы запускаете касание за пределами синего дочернего элемента div, ноесли вы запустите его синим div, когда этот исчезнет (когда ваш курсор 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"))

Есть ли способ заставить мой обработчик вызываться, даже если дочерние элементы исчезают?

1 Ответ

1 голос
/ 15 мая 2019

Самый простой способ добиться этого - позволить сенсорным событиям падать через детей на родителя.Просто добавьте style: { pointerEvents: "none" } в дочерний реквизит или добавьте его в свой CSS.Однако это не идеальное решение.Некоторым детям могут потребоваться события указателя, а IE может возражать против свойства CSS.

...