mousedown和mouseup事件在角度2中不起作用

时间:2017-05-23 12:07:09

标签: angular javascript-events angular-cli

基本上我需要点击并按住x秒然后运行一个事件。

在应用程序中,如果我单击一下就会运行事件但是,当我点击并按住它们时不会触发它们?

这可以正常,因为下面的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);
    });

但是我对所有方法都有相同的行为:单击可以工作,但点击并保持不闪光。

angular cli v 1.0 角4.0.0

有什么想法吗?

1 个答案:

答案 0 :(得分:1)

我不确定你想要什么,但我会试一试:

修改:

@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>

希望这有助于做出其他方法