How to handle hybrid devices correctly in click / touch events?

Question

I am trying to figure out how to work with hybrid devices when it comes to binding touch and click events, but I can’t find any solution that really works (I don’t have a hybrid device, so I can’t test directly, but since the fail the attempts do not even work on conventional devices, I believe that they also do not work on a hybrid device).

The problem is that on a hybrid device you have to cover both touch events and clicks without launching the function twice. Therefore, if you look at my unsuccessful attempts (2 and 3), you can see that I am attached to touchendboth and to click, but there seems to be some kind of syntax error or something, because this does not lead to that , Fire.

The first solution works fine, but when I just use one or the other type of event triggering.

What I have tried so far:

1 . Works on touch and click devices:

_renderer.listenGlobal('document', 'ontouchstart' in window ? 'touchend' : 'click', (e) => {

  console.log('works');  
});

2 . It does not start either by touch or by pressing a button:

_renderer.listenGlobal('document', 'touchend click', (e) => {

  console.log('works');

  e.stopPropagation(); 
});

3 . It does not start either by touch or by pressing a button:

_renderer.listenGlobal('document', 'touchend, click', (e) => {

  console.log('works');  

  e.stopPropagation();
});

As you can see, the first example covers device types 2/3, and the rest - 0.

, ?

Answer 1

debounce , , - :

import {Component, Renderer} from '@angular/core'
import { Subject } from 'rxjs/Subject';
import 'rxjs/add/operator/debounceTime';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
  `,
})
export class App {
  name = 'Angular2';
  subject = new Subject();

  constructor(renderer: Renderer) {
    renderer.listenGlobal('document', 'touchend', (e) => {
      console.log('touchend');
      this.subject.next(e);
    });
    renderer.listenGlobal('document', 'click', (e) => {
      console.log('click');
      this.subject.next(e);
    });

    this.subject.debounceTime(100).subscribe(event => {
      console.log(event); //do stuff here
    })
  }
}

, , :

, .

plunker

Answer 2

() () ​​ hammerjs index.html.

Angular 2 .

:

<my-component (tap)="doSomething()"></my-component>

index.html :

<script src="hammer.min.js"></script>

hammerjs

npm install hammerjs --save

. , - .

_hammerEvents: HammerManager;

public bindTapEvent(element: ElementRef):void{
    this._hammerEvents = new Hammer(element.nativeElement);
    this._hammerEvents.on("tap", (event:any) => { /* do something */});
}