如何正确处理点击/触摸事件中的混合设备？

Question

我试图找出如何使用混合设备来绑定触摸和点击事件,但我找不到任何实际上似乎有用的解决方案(我没有混合设备,所以我不能直接测试但由于失败的尝试甚至不能在普通设备上工作,我认为它们不能在混合设备上工作.

问题是在混合设备上,您必须同时覆盖触摸和单击事件,而不必两次触发功能.所以,如果你看一下我的失败尝试(2,3)你可以看到,我结合这两个touchend和click,但似乎是某种语法错误或东西,因为这将导致没有任何事件实际上是火.

第一个解决方案工作正常但是当我只使用一个或另一个事件触发类型时.

到目前为止我尝试过的:

1 - 适用于触摸设备和点击设备:

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

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

2 - 触摸或点击设备不会触发:

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

  console.log('works');

  e.stopPropagation(); 
});

3 - 触摸或点击设备不会触发:

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

  console.log('works');  

  e.stopPropagation();
});

如您所见,第一个示例涵盖2/3设备类型,而其他示例覆盖0.

如何确保我的功能在每台设备上都能正常运行？

Answer 1

只需在组件上添加（tap）指令而不是（click）指令，然后将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 */});
}

Answer 2

您可以使用主题和去抖动几毫秒,因此您只有一个事件,基本上是这样的:

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

因此,当您使用混合设备时,您将获得:

两个事件被解雇,但你只能在你的Observable上获得一个.

你可以在这个玩具中玩耍