双击/双击Angular2和离子答案

【问题标题】：Double Tap/ double click Angular2 & ionic双击/双击Angular2和离子
【发布时间】：2017-07-26 04:51:52
【问题描述】：

我正在搜索许多论坛和问题，但似乎没有人问如何在 Angular/ionic 2 中双击双击？

在 ionic v1 中，它可用于 on-double-tap（请参阅 http://ionicframework.com/docs/api/directive/onDoubleTap/）

是否有人可能有提示或任何代码来捕获 ionic 2 / angular 2 上的双击事件？

也许通过 HammerJS？

非常感谢！路易斯 :)

【问题讨论】：

不确定双击.. 但我想你可以考虑press event
我找到了.. 相对容易：(dblclick)="myFunction()" from en.wikipedia.org/wiki/DOM_events#Events :)
好的.. 不太确定它在移动设备中会有什么用处
那是因为你可能不知道我的申请？ (dblclick) 在移动设备上工作，我测试过。
好的..还不错:)

标签： angular ionic2 directive angular2-directives double-click

【解决方案1】：

所以 1-2 小时后很明显，您不需要使用 Ionic 捕获双击事件，而是使用纯 JavaScript：dblclick()

所以在 Angular 2 中它会是：(dblclick)="myFunction()" 就是这样！

在这里您可以找到JavaScript 的其他活动。

【讨论】：

为了实现通用的实现，无论平台如何，我们都需要编写自己的自定义指令。

【解决方案2】：

html文件

<button (tap)="tapEvent()">Tap Me!</button>

ts 文件

let count : number = 0;
tapEvent(){
this.count++;
setTimeout(() => {
  if (this.count == 1) {
    this.count = 0;
    alert('Single Tap');
  }if(this.count > 1){
    this.count = 0;
    alert('Double Tap');
  }
}, 250);

}

【讨论】：

【解决方案3】：

要捕获双击事件，可以使用以下方法：

(dblclick)="clickFunction()"

如果我们想在单击时触发一个函数，在双击时触发另一个函数，我们可以使用以下命令：

<button (click)="simpleClickFunction()" (dblclick)="doubleClickFunction()">click me!</button>

然而，simpleClickFunction 函数也会在doubleClickFunction 被触发时被调用。为了防止这种情况发生，setTimeout 可以提供以下帮助：

html template

<button (click)="simpleClickFunction()" (dblclick)="doubleClickFunction()">click me!</button>

Component

simpleClickFunction(): void{
    this.timer = 0;
    this.preventSimpleClick = false;
    let delay = 200;

    this.timer = setTimeout(() => {
      if(!this.preventSimpleClick){
        //whatever you want with simple click go here
        console.log("simple click");
      }
    }, delay);

  }

  doubleClickFunction(): void{
    this.preventSimpleClick = true;
    clearTimeout(this.timer);
    //whatever you want with double click go here
    console.log("double click");
  }

【讨论】：

投反对票的人能否解释一下原因？
我不是投反对票的人，但我想这是因为您的答案没有为其他答案添加任何内容，也因为它没有解决多平台兼容性的主要问题。但同样，这只是一个猜测。
答案已被其他人投票。所以这个答案对其他人有用

【解决方案4】：

Ionic 2 具有可以从 HTML 访问的基本手势。应该适用于iOS和Android。你可以找到documentation here。

他们提供的源代码is here。

【讨论】：

手势链接现在在这里：ionicframework.com/docs/utilities/gestures

【解决方案5】：

为了捕捉通用手势，我创建了以下内容来处理双击、长按和短滑动和释放。

确保从 Ionic Angular 导入 GestureController

longPressStartedTime;

constructor(
        private gestureController: GestureController,
        ) { }

在我们想要附加手势处理的元素上创建一个类

<div class="long-pressable">
some content here...
</div>

然后创建手势处理代码处理程序

   let pressableElements = this.elementRef.nativeElement.querySelectorAll('.long-pressable') as any[];

    for(let i = 0; i < pressableElements.length; i++) {
      const gesture = this.gestureController.create({
        el: pressableElements[i],
        gestureName: 'long-press',
        threshold: 0,
        onStart: ev => {

          // double click
          if(this.longPressStartedTime && ((new Date().getTime() - this.longPressStartedTime) < 300)) {
            this.doubleClickMessage(this.chatMessages[i]);
          }
          this.longPressStartedTime = new Date().getTime();
          console.log("start")
        },
        onMove: ev => {
          //console.log("move", ev);
          if(ev.deltaX > 0 && ev.deltaX < 40) {
            pressableElements[i].style.transform = `translateX(${ev.deltaX}px)`;
          }
        },        
        onEnd: ev => {
          let longPressEllapsed = new Date().getTime() - this.longPressStartedTime;
          console.log("long press ended", longPressEllapsed)
          pressableElements[i].style.transform = `translateX(0px)`;

          if(ev.deltaX > 30) {
            this.handleSwipe(this.chatMessages[i]);
          }
          else if(longPressEllapsed > 500) {
this.handleLongPress()
          }
        }
      });
      gesture.enable(true);
      pressableElements[i].addEventListener('contextmenu', (evt) => {evt.preventDefault()});
    }

【讨论】：