ionic 3 中的 touchstart 和 touchend 事件
touchstart and touchend events in ionic 3
我正在 Ionic 3 中寻找一个单独的事件处理程序,用于在移动应用程序上开始和结束对 HTML 元素的触摸。
我发现了很多相关和已解决的问题,但是 none 对于 Ionic 3,目前似乎只支持 "tap, press, pan, swipe, rotate, and pinch" (https://ionicframework.com/docs/components/#gestures)。
其中 none 似乎在开头提供了 "handler",但仅在结尾提供。我看到他们确实提供了触摸持续时间 (deltaTime) 的数据,但到那时它对我的目的没有用。
对于更多上下文,我想要的是在屏幕第一次触摸某个元素的确切时刻清除相关超时,然后查看对同一特定元素的触摸是否在一定时间内结束(例如 250 毫秒,因此可以将其评估为 "tap")。
例如这样的事情:
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>
高精度(低至毫秒)对于触摸开始时间尤其重要。
如有任何建议,我们将不胜感激。
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);
}
我正在 Ionic 3 中寻找一个单独的事件处理程序,用于在移动应用程序上开始和结束对 HTML 元素的触摸。
我发现了很多相关和已解决的问题,但是 none 对于 Ionic 3,目前似乎只支持 "tap, press, pan, swipe, rotate, and pinch" (https://ionicframework.com/docs/components/#gestures)。 其中 none 似乎在开头提供了 "handler",但仅在结尾提供。我看到他们确实提供了触摸持续时间 (deltaTime) 的数据,但到那时它对我的目的没有用。
对于更多上下文,我想要的是在屏幕第一次触摸某个元素的确切时刻清除相关超时,然后查看对同一特定元素的触摸是否在一定时间内结束(例如 250 毫秒,因此可以将其评估为 "tap")。
例如这样的事情:
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>
高精度(低至毫秒)对于触摸开始时间尤其重要。
如有任何建议,我们将不胜感激。
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);
}