Question

我正在Ionic 3中寻找一个单独的事件处理程序，用于开始和结束对移动应用上HTML元素的触摸。

我找到了很多相关问题和解决方案，但是没有Ionic 3，目前似乎只支持＆＃34;点击，按，平移，滑动，旋转和捏合＃34; （https://ionicframework.com/docs/components/#gestures）。而这些似乎都没有提供一个＆＃34;处理程序＆＃34;在开始时，但仅在结束时。我看到他们确实给出了触摸持续时间的数据（deltaTime），但到那时它对我的目的没有用。

对于更多上下文，我想要的是在首次触摸元素的屏幕上确切的时刻清除相关超时，然后查看同一特定元素上的触摸是否在特定时间内结束（例如250毫秒，因此它可以被评估为＆＃34;点击＆＃34;）。

例如：

JS：

timeout_1 = setTimeout(function() {
    // do something if timeout_1 not cleared by touch start
}, 4000);

touched(event) {
    clearTimeout(timeout_1);
    touching_x = true
    timeout_2 = setTimeout(function() {
        touching_x = false
        // store event details and do other things if timeout_2 not cleared by touch end
    }, 250);
}

touch_ended(event) { 
    if (touching_x==true) {
        clearTimeout(timeout_2);    
        // store event details and do some other things
    }
}

HTML：

<button ion-button type="button" (button_touch_started) = "touched($event)" (button_touch_ended) = "touch_ended($event)">Touch button</button>

高精度（低至ms）对于触摸开始时间尤为重要。

感谢任何建议。

Answer 1

<强> HTML 尝试使用div或按钮

<div style="height:100%;width:100%" (touchstart)="touchstart($event)" (touchend)="touchend($event)">
  </div>
  <button ion-button large primary (touchstart)="touchstart($event);">touchstart</button>
<button ion-button large primary (touchend)="touchend($event);">touchend</button>

<强> TS

touchstart(event){
    console.log(event);
  }

  touchend(event){
    console.log(event);
  }

离子3中的touchstart和touchend事件

1 个答案: