mousedown and mouseup events not working in angular 2

Question

I need to do a click and hold for x seconds then run an event.

In the app the events run if I do a single click but, when I click and hold none of them fire?

This works fine as the plunker below shows, but can't seem to get it working in the app.

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

I have also tried:

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

and applying:

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

also even using

private elementRef: ElementRef, private renderer: Renderer

and using

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

But I get the same behaviour with all methods: single click works but click and hold fires nothing.

angular cli v 1.0
angular 4.0.0

Any ideas?

Answer 1

Im not sure of what do you want, but I´ll give a try:

Modifying this:

@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>  `,
})

Now that line controls start while holding it, and releases end when you release the click.

Got it late, sorry, the way to make SetTimeout wait is to make it pass a variable, like in this examples:

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

EDIT: 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
};

And the button:

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

Hope this helps a little to make other approach