双击/双击 Angular2 & ionic

Question

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

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

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

也许通过 HammerJS？

非常感谢！路易斯 :)

Answer 1

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

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

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

Answer 2

Ionic 2 具有可从 HTML 访问的基本手势。应该在 iOS 和 Android 上工作。您可以找到 documentation here.

他们提供的源代码is here.

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

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 5

为了捕捉通用手势，我创建了以下代码来处理双击、长按和短扫及释放。

确保从 Ionic 导入 GestureController Angular

longPressStartedTime;

constructor(
        private gestureController: GestureController,
        ) { }

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

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

双击/双击 Angular2 & ionic

Double Tap/ double click Angular2 & ionic

directive

double-click

ionic2

angular2-directives

angular