クリック/タッチイベントでハイブリッドデバイスを適切に処理する方法は？

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

他のものは、私は私の機能は、すべての上で正しく動作することを確認することができますどのように0

をカバーしながら、あなたは、最初の例は2/3デバイスの種類をカバーして見ることができるようにデバイス？

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

2つのイベントが発生しましたが、Observableで1つしか取得できません。

あなたは、私がhammerjsを必要とする理由もう少し説明でき、このplunker

Answer 2

コンポーネントの代わりに（クリック）ディレクティブを追加して、index.htmlファイルにhammerjsを追加するだけです。

角2はあなたのためにすべての仕事をします。

例：あなたのindex.htmlアドオンで

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

：

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