2017-05-23 103 views
1

基本上我需要点击并按住x秒然后运行一个事件。mousedown和mouseup事件不能在角2中工作

在应用程序的事件运行,如果我做了一个单一的点击,但是,当我点击并保持他们都没有火?

这工作正常,因为下面的plunker显示,但似乎无法让它在应用程序中工作。

https://plnkr.co/edit/0gBDn0ZfCKXYHJiwq5eQ?p=preview

我也曾尝试:

<span (mousedown)="mousedown()" (mouseup)="mouseup()" (mouseleave)="mouseup()"> 
    Title 
</span> 

和应用:

this.elementRef.nativeElement.addEventListener('mousedown',() => { 
setTimeout(() => { 
    console.log('mouse mousedown'); 
}, 500); 
}); 

甚至还使用

private elementRef: ElementRef, private renderer: Renderer

,并使用

this.renderer.listen(this.listener.nativeElement, 'mousedown', (event) => { 
    console.log('mouse down', event); 
    }); 
this.renderer.listen(this.listener.nativeElement, 'mouseup', (event) => { 
     // Do something with 'event' 
     console.log('mouse up', event); 
    }); 

,但我得到了所有的方法相同的行为:单次点击的作品,但点击并按住火灾没有什么。

角CLI V 1.0 角4.0.0

任何想法?

+0

'但似乎无法让它在应用程序中工作到底在哪里? – yurzui

+0

我已经尝试过顶级应用程序组件和里面的router-outlet,但都没有工作。我已经在那里创建了一个新的组件。在@ViewChild上也使用了一个监听器 – Dezza

回答

0

林不知道你想要什么,但I'll给一试:

修改此:

@Component({ 
    selector: 'my-app', 
    template: ` 
    <span> Click and then let go 
    <br/> 
    <p onmousedown="mousedown()" onmouseup="mouseup()">hold to 
start, release to end</p> 
start: {{start}} 
<br/> 
end: {{end}}  
</span> 
<br/> 
<div (click)="clear()">Clear</div> `, 
}) 

现在该行控制启动按住它,并释放结束的时候你释放点击。

得到它晚了,不好意思,使setTimeout的等待的办法就是让它在这个例子传递变量,如:

basic javascript question: after 5 seconds, set variable to true

编辑:https://forum.ionicframework.com/t/how-to-detect-long-3-sec-touch-event-in-ionic/15069/2

var didUserHoldForThreeSeconds = 0; 
$scope.hold = function(event) { 
    didUserHoldForThreeSeconds = event.timestamp; 
}; 
$scope.release = function (event) { 
if (event.timestamp - didUserHoldForThreeSeconds > 3000) { 
    console.log('Hooray! They held for 3 seconds') 
} 
    didUserHoldForThreeSeconds = 0; // reset after each release 
}; 

而按钮:

<button class="button" on-hold="hold($event)" on-release="release($event)">My Button</button> 

希望这有助于很少使其他方法

+0

谢谢,但这个监听器按预期工作;事件正确触发。它在应用程序中使用时不起作用。 – Dezza

+0

发现另一篇文章的主题类似,也许这有助于更多: https://stackoverflow.com/questions/11144370/using-mousedown-event-on-mobile-without-jquery-mobile –

相关问题