如何在angular2中使我在按钮上的长按指令不触发单击或路由器事件？
如何在angular2中使我在按钮上的长按指令不触发单击或路由器事件？
提问于 2017-07-21 04:37:19
我有以下长新闻指令：
//<div (click)="open(item)" [routerLink]="['./myroute']" [routerLinkActiveOptions]="{exact: true}" long-press (longpress)="select(item)"></div>
import {Directive, HostListener, Output, EventEmitter} from '@angular/core';
@Directive({
selector: '[long-press]'
})
export class LongPressDirective {
private touchTimeout: any;
@Output() longpress = new EventEmitter();
private rootPage: any;
constructor() {}
@HostListener('touchstart') touchstart():void {
this.touchTimeout = setTimeout(() => {
this.longpress.emit({});
}, 400);
}
@HostListener('touchend') touchend():void {
this.touchEnd();
}
@HostListener('touchcancel') touchcancel():void {
this.touchEnd();
}
private touchEnd():void {
clearTimeout(this.touchTimeout);
}问题是，当我做一个长按压，我触发两个函数(长新闻)和(点击)。如何才能使其只触发"select(item)“方法，而不触发"open(item)”，或者在进行长按时导航到另一条路径？
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-07-21 06:42:44
不要像下面这样使用鼠标向下和向上的触屏启动。
import {
Directive,
Input,
Output,
EventEmitter,
HostBinding,
HostListener
} from '@angular/core';
@Directive({ selector: '[long-press]' })
export class LongPress {
@Input() duration: number = 400;
@Output() onLongPress: EventEmitter<any> = new EventEmitter();
@Output() onLongPressing: EventEmitter<any> = new EventEmitter();
@Output() onLongPressEnd: EventEmitter<any> = new EventEmitter();
private pressing: boolean;
private longPressing: boolean;
private timeout: any;
private mouseX: number = 0;
private mouseY: number = 0;
@HostBinding('class.press')
get press() { return this.pressing; }
@HostBinding('class.longpress')
get longPress() { return this.longPressing; }
@HostListener('mousedown', ['$event'])
onMouseDown(event) {
// don't do right/middle clicks
if(event.which !== 1) return;
this.mouseX = event.clientX;
this.mouseY = event.clientY;
this.pressing = true;
this.longPressing = false;
this.timeout = setTimeout(() => {
this.longPressing = true;
this.onLongPress.emit(event);
this.loop(event);
}, this.duration);
this.loop(event);
}
@HostListener('mousemove', ['$event'])
onMouseMove(event) {
if(this.pressing && !this.longPressing) {
const xThres = (event.clientX - this.mouseX) > 10;
const yThres = (event.clientY - this.mouseY) > 10;
if(xThres || yThres) {
this.endPress();
}
}
}
loop(event) {
if(this.longPressing) {
this.timeout = setTimeout(() => {
this.onLongPressing.emit(event);
this.loop(event);
}, 50);
}
}
endPress() {
clearTimeout(this.timeout);
this.longPressing = false;
this.pressing = false;
this.onLongPressEnd.emit(true);
}
@HostListener('mouseup')
onMouseUp() { this.endPress(); }
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45229061
复制相关文章
相似问题
腾讯云开发者
