区分“正常”单击和拖动后单击

Question

问题

我有一个图像滑块，问题是，预览图像上的单击事件在拖动后被触发。 我在this video展示了它

假定行为

点击事件应该只在用户没有预先拖动的情况下触发。

代码

isGrabbing: boolean = false;
    startX: number;
    startXPerc: number;
    translateX: number = 0;
    diffPerc: number;

    @ViewChild('slider') slider;

    onMouseDown(e: MouseEvent): void {
        const pageX = e.pageX;
        this.isGrabbing = true;
        this.startX = pageX - this.slider.nativeElement.offsetLeft;
        this.startXPerc = this.translateX;
    }

    onMouseUp(e: MouseEvent): void {
        this.isGrabbing = false;
    }

    onMouseMove(pageX: number): void {
        if (!this.isGrabbing) return;
        const x = pageX - this.slider.nativeElement.offsetLeft;
        const diff = this.startX - x;
        this.diffPerc = 100 * diff / this.slider.nativeElement.offsetWidth;
        this.translateX = this.startXPerc - this.diffPerc;
    }

    get translateXValue(): string {
        return `translateX(${this.translateX}%)`
    }

    onSmallItemClick(i: number): void {
        // this line should only be triggered
        // if the user did not drag beforehand
        this.animate(i * -100);
    }

HTML：

<div
    class="small-slider-container"
    (mousedown)="onMouseDown($event)"
    (mousemove)="onMouseMove($event)"
    (mouseup)="onMouseUp($event)"
    #slider
>
    <div
        class="small-slider"
        [style.transform]="smallTranslateXValue"
        [class.grabbing]="smallSliderGrabbing"
        [class.grab]="!smallSliderGrabbing"
    >
        <div
            class="item"
            *ngFor="let i of images; let j = index"
            [style.left]="j * 10 + '%'"
            (click)="onSmallItemClick(j)"
        >
            <div class="content">
                <img src="{{ i }}">
            </div>
        </div>
    </div>
</div>

Answer 1

click 在mouseup 之后触发。您的onMouseUp 函数需要与onSmallItemClick 结合使用。

此时，mousedown 发生并将 isGrabbing 设置为 true，然后 mouseup 将其设置为 false。因此，当 click 触发时，用户“没有”抓取。

来自w3.org：

这些事件的顺序是：

mousedown
mouseup
click