双击/双击 Angular2 和离子

Question

我在许多论坛和问题上搜索，但是似乎没有人问如何双击ou double in Angular/ionic 2？

在离子V1中可以使用on-double-tap（请参阅http://ionicframework.com/docs/api/directive/ondoubtap/）

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

也许是通过hammerjs？

非常感谢！路易斯:)

Answer 1

因此，1-2小时后，很明显，您不需要使用ionic捕获双击事件，而是使用pure javascript ： dblclick()

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

在这里，您将找到JavaScript的其他事件。

Answer 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);

}

Answer 3

要捕获双击事件，可以使用以下内容：

(dblclick)="clickFunction()"

如果我们想在单击时启动函数，请双击以下单击，我们可以使用以下内容：

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

但是，当doubleClickFunction发射时，simpleClickFunction功能也将被调用。为了防止发生这种情况，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");
  }

Answer 4

so。

1. dbclick不用在智能手机上。
2. 使用库实际上是去
的方式

我在此github repo

上找到了解决方案

指令

import { Directive, EventEmitter, Output, OnInit, HostListener } from '@angular/core';
@Directive({
  selector: '[appTap]'
})
export class TapDirective implements OnInit {
  @Output() tap = new EventEmitter();
  @Output() doubleTap = new EventEmitter();
  lastTap = 0;
  tapCount = 0;
  tapTimeout = null;
  tapGesture = {
    name: 'tap',
    enabled: false,
    interval: 250,
  };
  doubleTapGesture = {
    name: 'doubleTap',
    enabled: false,
    interval: 300,
  };
  constructor() { }
  ngOnInit(): void {
    this.tapGesture.enabled = true;
    this.doubleTapGesture.enabled = true;
  }
  @HostListener('click', ['$event'])
  handleTaps(e) {
    const tapTimestamp = Math.floor(e.timeStamp);
    const isDoubleTap = this.lastTap + this.tapGesture.interval > tapTimestamp;
    if (!this.tapGesture.enabled && !this.doubleTapGesture.enabled) {
      return this.resetTaps();
    }
    this.tapCount++;
    if (isDoubleTap && this.doubleTapGesture.enabled) {
      this.emitTaps();
    } else if (!isDoubleTap) {
      this.tapTimeout = setTimeout(() => this.emitTaps(), this.tapGesture.interval);
    }
    this.lastTap = tapTimestamp;
  }
  private emitTaps() {
    if (this.tapCount === 1 && this.tapGesture.enabled) {
      this.tap.emit();
    } else if (this.tapCount === 2 && this.doubleTapGesture.enabled) {
      this.doubleTap.emit();
    }
    this.resetTaps();
  }
  private resetTaps() {
    clearTimeout(this.tapTimeout); // clear the old timeout
    this.tapCount = 0;
    this.tapTimeout = null;
    this.lastTap = 0;
  }
}

模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TapDirective } from './tap/tap.directive';
import { PressDirective } from './press/press.directive';
import { SwipeDirective } from './swipe/swipe.directive';
import { GestureDirective } from './gesture/gesture.directive';
@NgModule({
  declarations: [
    TapDirective,
  ],
  imports: [
    CommonModule
  ],
  exports: [
    TapDirective,
  ]
})
export class TapDirectiveModule { }

<div appTap (doubleTap)="doSomething()"

你去..

提示：我确实让tap逻辑，如果不需要

Answer 5

离子2具有基本手势，可以从HTML访问。应该在iOS和Android上工作。您可以在此处找到该文档。

他们提供的源代码在这里。

Answer 6

用于捕获通用手势，我创建了以下操作来处理双击，长按和短滑动和释放。

确保从离子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()});
    }