要解决Angular 10中拖拽时不触发(click)函数的问题,可以使用以下方法:
拖拽元素
import { Directive, HostListener } from '@angular/core';
@Directive({
selector: '[dragDirective]'
})
export class DragDirective {
@HostListener('mousedown', ['$event'])
onMouseDown(event: MouseEvent) {
event.stopPropagation();
}
}
onClick() {
if (!this.isDragging) {
// 执行点击事件的逻辑
}
}
export class DragDirective {
private isDragging: boolean = false;
@HostListener('mousedown', ['$event'])
onMouseDown(event: MouseEvent) {
event.stopPropagation();
this.isDragging = true;
}
@HostListener('mouseup', ['$event'])
onMouseUp(event: MouseEvent) {
event.stopPropagation();
this.isDragging = false;
}
}
通过以上方法,可以在拖拽时不触发(click)函数,只有在非拖拽状态下才能触发点击事件。