Angular: Problems with TouchEvents

0

I need to detect touchstart , touchend and touchmove to make a selection of days as the user drags the finger on the screen. But the touchmove event apparently was not done for this purpose. As the example below, it will keep me returning only the first day.

  

Controller

@Component({
     selector: 'app-calendar',
     templateUrl: 'url.html'
})
export class Calendar {
    touchStart() {
        console.log('start');
    }

    touchHover(dia) {
        console.log('hover >> ' + dia);
    }

    touchEnd() {
        console.log('end');
    }
}
  

HTML

<div (touchstart)="touchStart()" (touchend)="touchEnd()">
     <div (touchmove)="touchHover('1')">1</div>
     <div (touchmove)="touchHover('2')">2</div>
     <div (touchmove)="touchHover('3')">3</div>
</div>

I need to get each element after touchstart , as the user passes under it on the device. The touchmove is executed however it will always return me the element where I started the touch. Example: If I started the touch on day 1, it will be returning 1 independent it has been moving under day 2.

Has anyone ever had this problem? Do you know how to solve?

    
asked by anonymous 09.10.2018 / 21:29

1 answer

0

Testing in Chrome Dev Tools the events of mouse seem to work for touch (pending test on actual device).

<div (mouseenter)="touchStart()" (mouseleave)="touchEnd()">
  <div (mouseenter)="touchHover('1')">1</div>
  <div (mouseenter)="touchHover('2')">2</div>
  <div (mouseenter)="touchHover('3')">3</div>
</div>
    
15.10.2018 / 05:03