Как правильно управлять гибридными устройствами в событиях щелчка/касания?

Question

Я пытаюсь выяснить, как работать с гибридными устройствами, когда дело доходит до привязки событий касания и кликов, но я не могу найти какое-либо решение, которое действительно работает (у меня нет гибридного устройства, поэтому я не могу тест, но поскольку неудачные попытки даже не работают на обычных устройствах, я полагаю, что они не работают на гибридном устройстве).

Проблема в том, что на гибридном устройстве вы должны покрывать как события касания, так и щелчки, не запуская функции дважды. Поэтому, если вы посмотрите на мои неудачные попытки (2 и 3), вы увидите, что я привязываюсь к touchend и click, но, похоже, какая-то синтаксическая ошибка или что-то еще, потому что это не приводит к тому, что ни одно из событий не срабатывает.

Первое решение работает нормально, но это то, когда я просто использую тот или иной тип стрельбы.

То, что я пытался до сих пор:

- Работает на сенсорных устройствах и нажмите устройства:

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

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

- Не срабатывает на тонально или нажмите устройства:

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

    console.log('works'); 

    e.stopPropagation(); 
}); 

- не срабатывает на любой коснитесь или нажмите устройство:

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

    console.log('works'); 

    e.stopPropagation(); 
}); 

Как вы можете видеть, что первый пример охватывает 2/3 типов устройств, в то время как другие из них покрывает 0.

Как я могу убедиться, что мои функции будут работать должным образом на каждом устройство?

Answer 1

Вы можете использовать Предмет и дребезг в течение нескольких миллисекунд, так что вы только одно события, в основном что-то вроде этого:

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.

Угловой 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 */}); 
}