Заменить пассивный addEventListener на метод onTouchStart - PullRequest
Новая
       59

Заменить пассивный addEventListener на метод onTouchStart

1 голос
/ 29 апреля 2019

Я хочу заменить document.addEventListener('touchstart', handler, {passive: true}); на onTouchStart={handler}

Так что, если у меня был пассивный флаг на true , тогда мой метод дескриптора должен выглядеть так: 

const handler = (event) => { 
    console.log(event); 
}

и когда у меня установлен флаг на false : 

 const handler = (event) => { 
    event.preventDefault();
    console.log(event); 
}

Я говорю о пассивных прослушивателях событий и поведении браузера.Это только об использовании preventDefault() или нет?Я правильно понимаю или нет?

1 Ответ

0 голосов
/ 29 апреля 2019

Просмотр документов здесь

В настоящее время браузеры не могут знать, собирается ли прослушиватель сенсорных событий отменить прокрутку, поэтому они всегда ждутслушатель заканчивает работу перед прокруткой страницы.Пассивные прослушиватели событий решают эту проблему, позволяя вам установить флаг в параметре параметров addEventListener, указывающий, что прослушиватель никогда не отменит прокрутку.

Это означает, что вы изменилиповедение события.Если вы измените только preventDefault, он все равно будет вести себя нормально (не пассивно).Так что это ничего не меняет.

Причина, по которой в документах говорится "удалить" preventDefault, заключается в том, что вам нужно действие по умолчанию для события при установке для пассивного значения true.

Это будет обычное событие, без пассива. 

onTouchStart={handler}

Это добавит пассивное действие, но удалит из-за preventDefault

const handler = (event) => { 
    event.preventDefault();
    console.log(event); 
} 
...
onTouchStart={handler}

Так что вынужно .addEventListener с {passive: true}, а также удалить любой вызов .preventDefault().

Вот пример того, как сделать это в любом компоненте. 

class SomeClass extends React.Component {

  componentDidMount() {
    this.elementYouWant.addEventListener("touchstart", this.handleTouchStart, {passive: true});
  }

  componentWillUnmount() {
    this.elementYouWant.removeEventListener("touchstart", this.handleTouchStart);
  }

  handleTouchStart = (e) => {
    console.log(e);
  }

  render() {
    return (
      <div ref={e => this.elementYouWant = e}>
        ...
      </div>
    );
  }

}

Я искал накак передать параметр-параметр слушателю событий без необходимости создавать его в componentDidMount и componentWillUnmount в реакции, но не может его найти.

Вы можете увидеть здесь лучший способ реализовать это, потому что некоторый браузер будет интерпретировать {passive: true} как true, и это создаст другое поведение.

...