Question

我有以下angular2模板：

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

Longpress是一个自定义属性指令，当你有500毫秒的mousedown时会触发。

<div>上的点击事件和<img>处理正常。当我对图像进行长按时，会调用bar（）函数。但是，在mouseUp上（在长按之后），点击事件会在<img>和父<div>上触发。

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

我现在唯一能想到的就是编写一个自定义属性指令，该指令仅触发＆＃34;点击＆＃34;这需要不到500毫秒。这对我来说似乎有点过头了。

Answer 1

我最终创建了一个＆＃34; longPress＆＃34;和＆＃34; shortPress＆＃34;指示。长时间仅在一段时间后触发，并且短路仅在同一阈值以下点火。

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);
    }
}

Answer 2

您是否尝试过$event作为第一个参数，然后在栏中执行event.stopPropagation()（） - 方法？像这样：

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

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

长按时阻止点击事件

2 个答案: