React - предотвращение события onMouseDown для родительского элемента при щелчке дочернего элемента. - PullRequest
Новая
       18

React - предотвращение события onMouseDown для родительского элемента при щелчке дочернего элемента.

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

У меня есть родительский элемент с событием onMouseDown, которое я использую, чтобы сделать его перетаскиваемым.

В этом я имею несколько абсолютно позиционированных дочерних элементов с событиями onClick.

Я думал, чтоприменяя более высокий Z-индекс к дочерним элементам, будет запускаться onClick, а не onMouseDown, но кажется, что оба запускаются, и если div был перетащен, событие onClick не будет работать должным образом.Я пытался остановить распространение событий, но, похоже, это не помогло.Как я могу предотвратить активацию родительского onMouseDown при запуске onClick на дочернем элементе?

Это упрощенная версия кода 

export default class Day extends Component {

    constructor(props) {
    super(props);
    this.showTalks = this.showTalks.bind(this)

    this.state = {isScrolling: false};

    this.componentWillUpdate = this.componentWillUpdate.bind(this)
    this.toggleScrolling = this.toggleScrolling.bind(this)
    this.onScroll = this.onScroll.bind(this)
    this.onMouseMove = this.onMouseMove.bind(this)
    this.onMouseUp = this.onMouseUp.bind(this)    
    this.onMouseDown = this.onMouseDown.bind(this)
    this.attachScroller = this.attachScroller.bind(this)
    this.titleRef = React.createRef();

}

componentWillUpdate = (nextProps, nextState) =>{
 if(this.state.isScrolling !== nextState.isScrolling ) {
   this.toggleScrolling(nextState.isScrolling);
  }
};

toggleScrolling = (isEnable) => {
    if (isEnable) {
      window.addEventListener('mousemove', this.onMouseMove);
      window.addEventListener('mouseup', this.onMouseUp);
      window.addEventListener("drag", this.onMouseMove);
    } else {
      window.removeEventListener('mousemove', this.onMouseMove);
      window.removeEventListener("drag", this.onMouseMove);
    }
};

onScroll = (event) => {
};

onMouseMove = (event) => {

    const {clientX, scrollLeft, scrollTop, clientY} = this.state;
    this._scroller.scrollLeft = -(scrollLeft - clientX + event.clientX);
    this._scroller.scrollTop = scrollTop - clientY + event.clientY;


  };

  onMouseUp =  () => {
    this.setState(
      {
        isScrolling: false, 
        scrollLeft: 0, 
        scrollTop: 0,
        clientX: 0, 
        clientY:0
      }
    );
  };

  onMouseDown = (event) => {

    const {scrollLeft, scrollTop} = this._scroller;
    this.setState({
      isScrolling:true, 
      scrollLeft, 
      scrollTop, 
      clientX:event.clientX, 
      clientY:event.clientY
    });
  };

  attachScroller = (scroller) => {
    this._scroller = ReactDOM.findDOMNode(scroller);
  };

  showTalks(talkApi){
    this.props.showTalks( talkApi);
  }

  render() {
    let talksArray = [<Talk></Talk>] //removed code that generates an array of talks
    return (
        <div 
          onMouseDown={this.onMouseDown}
          onScroll={this.onMouseMove}
          className="multi-columns">
          {talksArray}
        </div>
      );
  }
}


export default class Talk extends Component {

  constructor(props) {
    super(props);
    this.handleFetch = this.handleFetch.bind(this);
  }

  handleFetch(e){
    e.preventDefault();
    e.stopPropagation();
    let id = e.currentTarget.dataset.id;
   this.props.showTalks(id);
  }

  render(){
    return(
        <div 
          data-id={this.props.id} 
          onClick={this.handleFetch.bind(this)}
         >
         <h2>{this.props.title}</h2>
        </div>
      )
  }
}

1 Ответ

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

Я понял, что e.stopPropagation ();на handleFetch () функция не работает, потому что я использую событие onClick и прекращаю распространение, которое не влияет на полностью отдельное событие onMouseDown.

Пока я переключаю onClick на другое событие onMouseDown, и затем работает stopPropagation.Но мне было бы интересно, если есть лучший способ разрешить мне не использовать onClick.

...