防止长按点击事件

Question

我有以下 angular2 模板：

<div (click)="foo()">
   <img (longPress)="bar(1)" (click)="foobar(1)" />
   <img (longPress)="bar(2)" (click)="foobar(2)"/>
</div>

长按是一个自定义属性指令，当您按住鼠标 500 毫秒时触发。

<div> 和 <img> 上的点击事件处理得很好。当我长按图像时，将调用 bar() 函数。但是，在 mouseUp 上（长按后），点击事件在 <img> 和父 <div> 上触发。

如何用最简单的方式阻止这些点击事件。

我现在唯一能想到的就是编写一个自定义属性指令，该指令仅在 "clicks" 上触发，耗时不到 500 毫秒。这对我来说似乎有点过头了。

Answer 1

您是否尝试过将 $event 作为第一个参数传递，然后在您的 bar() 方法中执行 event.stopPropagation()？像这样：

<img (longPress)="bar($event,1)" (click)="foobar(1)" />

function bar(event:Event,myNum:number){event.stopPropagation();}

Answer 2

我最终创建了一个 "longPress" 和一个 "shortPress" 指令。长按仅在设定的时间后触发，而短压仅在低于相同阈值时触发。

import { Directive, HostListener, Output, EventEmitter } from '@angular/core';

@Directive({ selector: '[shortPress]' })

export class ShortPressDirective {

    @Output()
    shortPress = new EventEmitter();

    private _timeout: any;
    private _isShort: boolean;

    @HostListener('mousedown') onMouseDown( e ) {
        this._isShort = true;
        this._timeout = setTimeout(() => {
            this._isShort = false;
        }, 500);
    }

    @HostListener('mouseup') onMouseUp( e ) {
        if (this._isShort) {
            this.shortPress.emit( e );
        }
        clearTimeout(this._timeout);
    }

    @HostListener('mouseleave') onMouseLeave() {
        clearTimeout(this._timeout);
    }
}

和

import { Directive, HostListener, Output, EventEmitter } from '@angular/core';

@Directive({ selector: '[longPress]' })

export class LongPressDirective {

    @Output()
    longPress = new EventEmitter();

    private _timeout: any;

    @HostListener('mousedown') onMouseDown( e ) {
        this._timeout = setTimeout(() => {
            this.longPress.emit( e );
        }, 500);
    }

    @HostListener('mouseup') onMouseUp() {
        clearTimeout(this._timeout);
    }

    @HostListener('mouseleave') onMouseLeave() {
        clearTimeout(this._timeout);
    }
}

防止长按点击事件

prevent click event on long press

mouseevent

stoppropagation

long-press

angular