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

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

解决

鼠标拖动盒子时,将 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

posted @ 2023-11-16 17:34  litiyi  阅读(108)  评论(0编辑  收藏  举报