拖动和点击同时触发解决办法

[deepthan]

问题

拖拽的时候会触发点击事件，所以得分清是拖拽还是点击

原理介绍

• 点击一般使用click,但是我们这里需要用mouseDown和mouseUp来实现
• 拖动过程中会触发三个事件
  • mouseDown、mouseMove、mouseUp

所以我们在mouseDown事件中记录鼠标的位置，在mouseUp 时比较此时的位置是否相同则可判断是点击还是拖拽。

html

<div
  cdkDrag
  (mousedown)="onMousedown($event)"
  (mouseup)="onMouseup($event)"
>
</div>

ts

  dowmPosi = [];
  upPosi = []

  onMousedown(event: MouseEvent){
    const { pageX, pageY } = event;
    this.dowmPosi.push(pageX, pageY);
  }

  onMouseup(event: MouseEvent){
    const { pageX, pageY } = event;
    this.upPosi.push(pageX, pageY)
    if(_.isEqual(this.dowmPosi, this.upPosi)){
      // 这里去执行点击事件做的事情
    }
    this.resetMouseFlag();
  }

  resetMouseFlag(){
    this.dowmPosi = [];
    this.upPosi = [];
  }