526互联

鼠标拖拽拖动盒子时，与盒子内某些点击事件冲突问题解决

发布时间 2023-11-16 17:36:30作者: litiyi

问题：拖动时会触发圆球的点击事件

解决

鼠标拖动盒子时，将 moving 设为 true 意为正在拖动盒子，此时将 class="move" 遮挡容器展示在悬浮球上层，以覆盖悬浮球，此时也就不存在触发悬浮球点击事件的冲突了；

鼠标拖动完盒子弹起时再将 moving 设为 false 意为不在拖动盒子（遮挡容器 class="move" 不存在），可以触发悬浮球点击事件

注解

click 点击事件主要是在鼠标弹起时触发， class="move" 容器展示时，鼠标已不再悬浮器上点击，所以也就不存在鼠标在悬浮球上弹起的说法，因此可解决拖动盒子时与悬浮球点击事件冲突的问题

关键代码

<div class="btn"></div>
<div class="move" *ngIf="moving"></div>
.move {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
      }

 

 @HostListener('mousedown', ['$event'])
  // 移动触发
  onMouseDown(e: MouseEvent) {
    this.onDown(e);
    this.moving = true;
  }

@HostListener('mousemove', ['$event'])
  // 开始移动
  onMousemove(e: MouseEvent) {
    this.moving && this.onMMove(e);
  }

 @HostListener('mouseup', ['$event'])
  // 移动结束
  onMouseUp(_e: MouseEvent) {
    this.onEnd();
    this.moving = false;
  }

来源

https://blog.csdn.net/m0_53562074/article/details/132897692