почему это реагирует / javascript "removeEventListener" не удаляет слушателя? - PullRequest
Новая
       31

почему это реагирует / javascript "removeEventListener" не удаляет слушателя?

0 голосов
/ 21 декабря 2018

Похоже, что слушатели здесь не удалены.Есть идеи как это исправить?Я предполагаю, что это связано с тем, как я «делюсь» слушателем, и я использую функции стрелок (согласно рекомендации здесь https://medium.freecodecamp.org/reactjs-pass-parameters-to-event-handlers-ca1f5c422b9)

Код: 

import * as React from 'react';

export default class ITestComponent extends React.Component { 

  public render() {
    return (
      <div>

        <div 
          onMouseDown={this.handleMouseDown('horizontal')}
          draggable={false}
          style={{ border: '1px solid blue', padding:20 }}
        >
          Horizontal Drag Test
        </div>

        <div 
          onMouseDown={this.handleMouseDown('vertical')}
          draggable={false}
          style={{ border: '1px solid green', padding:20 }}
        >
          Vertical Drag Test
        </div>

      </div>
    );
  }

  private handleMouseDown = (eType:string) => (e:any) => {
    console.log('Add Event Listeners (handleMouseDown)', eType)
    window.addEventListener('mousemove', this.handleMouseMove(eType))
    window.addEventListener('mouseup', this.handleMouseUp(eType))
  }

  private handleMouseMove = (eType:string) => (e:MouseEvent) => {
    console.log(' - handleMouseMove', eType, e.clientY)
  };

  private handleMouseUp = (eType:string) => (e:MouseEvent) => {
    console.log('Remove Listeners (handleMouseUp)', eType)
    window.removeEventListener('mousemove', this.handleMouseMove(eType))
    window.removeEventListener('mouseup', this.handleMouseUp(eType));
  };

}

Выход на консоль послещелкнув по «тесту перетаскивания по горизонтали» и, потянув вниз (с нажатой кнопкой мыши), отпустив кнопку мыши, затем перетащив немного больше .. 

Add Event Listeners (handleMouseDown) horizontal
 - handleMouseMove horizontal 61
 ...
 - handleMouseMove horizontal 220
 - handleMouseMove horizontal 221
Remove Listeners (handleMouseUp) horizontal
 - handleMouseMove horizontal 222
 - handleMouseMove horizontal 222
 - handleMouseMove horizontal 228
 ...

Вопрос конкретно заключается в том, как сохранить концепцию «повторного использования»обработчик событий для разных целей?

Примечание. Здесь я не использую анонимную функцию, как в одном из предложенных ответов ( Javascript removeEventListener не работает )

1 Ответ

0 голосов
/ 21 декабря 2018

Даже когда вы определяете свою функцию с помощью функций со стрелками карри и выполняете, скажем, this.handleMouseDown('horizontal'), каждый раз возвращается новый экземпляр функции, и для того, чтобы EventListeners могли быть назначены и удалены, необходимо передать один и тот же экземпляр функции.Вы могли бы реализовать вышеизложенное следующим образом 

import * as React from 'react';

export default class ITestComponent extends React.Component { 

  public render() {
    return (
      <div>

        <div 
          onMouseDown={this.handleMouseDown.bind(this,'horizontal')}
          draggable={false}
          style={{ border: '1px solid blue', padding:20 }}
        >
          Horizontal Drag Test
        </div>

        <div 
          onMouseDown={this.handleMouseDown.bind(this,'vertical')}
          draggable={false}
          style={{ border: '1px solid green', padding:20 }}
        >
          Vertical Drag Test
        </div>

      </div>
    );
  }

  private handleMouseDown = (eType:string, e:any) => {
    console.log('Add Event Listeners (handleMouseDown)', eType)
    this._handleMouseMove = this.handleMouseMove.bind(this, eType);
    this._handleMouseUp = this.handleMouseUp.bind(this, eType);
    window.addEventListener('mousemove', this._handleMouseMove)
    window.addEventListener('mouseup', this._handleMouseUp)
  }

  private handleMouseMove =  (eType: string, e:MouseEvent) => {
    console.log(' - handleMouseMove', eType, e.clientY)
  };

  private handleMouseUp = (eType:string, e:MouseEvent) => {
    console.log('Remove Listeners (handleMouseUp)', eType)
    window.removeEventListener('mousemove', this._handleMouseMove)
    window.removeEventListener('mouseup', this._handleMouseUp);
  };

}
...