反应-单击子元素时防止父元素上的onMouseDown事件

Question

I have a parent element with an onMouseDown event that I use to make it draggable.

Within this I have several absolutely positioned child elements with onClick events.

I had thought that by applying a higher Z-index to the child elements the onClick would be run rather than the onMouseDown but it seems that both run and if the div has been dragged the onClick event will not run properly. I've tried to stop the events propagating but it doesn't seem to help. How can I prevent the parent onMouseDown being activated when the onClick on the child runs?

This is a simplified version of the code

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>
      )
  }
}

Answer 1

I realised that e.stopPropagation(); on the handleFetch() function doesn't work because I'm using an onClick event and stopping the propagation of that has no effect on a totally seperate onMouseDown event.

For now I'm switching the onClick to another onMouseDown event and then the stopPropagation works. But I'd be interested if there is a better way to allow me ot use onClick.