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

当涉及到绑定触摸和点击事件时，我试图找出如何使用混合设备，但我找不到任何实际可行的解决方案（我没有混合设备，因此无法直接测试，但由于失败的尝试在正常设备上都不起作用，我假设它们在混合设备上也不起作用）

问题是，在混合设备上，您必须覆盖触摸和点击事件，而不必启动两次功能。因此，如果您查看我失败的尝试（2和3），您可以看到我绑定到

touchend

和

click

，但似乎存在某种语法错误或其他原因，因为这不会导致任何事件实际触发

第一种解决方案工作得很好，但我只是使用一种或另一种事件触发类型

到目前为止，我所尝试的：

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

_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-不会在触摸或点击设备上触发：

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

3-不会在触摸或点击设备上触发：

_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

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

只需在组件上添加（点击）指令而不是（点击）指令，然后将hammerjs添加到index.html文件中

Angular 2将为您完成所有工作

例如：

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

有了这个按钮，点击和点击就会正常工作。 如果希望对点击有更多的控制，或者希望在运行时将事件绑定到元素，请尝试类似的方法

_hammerEvents: HammerManager;

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

---

您可以使用一个Subject和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
    })
  }
}

从'@angular/core'导入{Component，Renderer}
从'rxjs/Subject'导入{Subject}；
导入'rxjs/add/operator/debounceTime'；
@组成部分({
选择器：“我的应用程序”，
模板：`
你好{{name}
`,
})
导出类应用程序{
名称='Angular2'；
主题=新主题（）；
构造函数（渲染器：渲染器）{
renderer.listenGlobal（'document'，'touchend'，（e）=>{
console.log（'touchend'）；
本.主题.下一（e）；
});
renderer.listenGlobal（'document'，'click'，（e）=>{
console.log（'click'）；
本.主题.下一（e）；
});
this.subject.debounceTime（100.subscribe）（事件=>{
console.log（event）；//在此处执行操作
})
}
}

因此，当您使用混合设备时，您将得到：

触发了两个事件，但在可观察到的事件上只触发了一个

---

你可以在这里玩一下

你能再解释一下我为什么需要hammerjs吗？@Chrillewoodz Angular 2已经为这种情况提供了一个指令（tap），该指令响应tap事件（ontouchstart，touchend），并将与点击事件一起使用。在引擎盖下Angular 2将检查hammerjs是否已加载。您知道如何将水龙头绑定到文档上吗？我收到一个错误，说它没有实现Hanks@dlcardozo。它就像一个符咒。我在台式机、adnroid手机以及装有iOS 12的iPad上进行了测试。这应该是正确的答案。这是我所缺少的知识。我很好奇，我会更彻底地检查这一点。