鼠标拖拽拖动盒子时,与盒子内某些点击事件冲突问题解决
问题:拖动时会触发圆球的点击事件
解决
鼠标拖动盒子时,将 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