【问题标题】:touchstart and touchend events in ionic 3ionic 3 中的 touchstart 和 touchend 事件
【发布时间】:2018-04-04 11:55:45
【问题描述】:

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

我发现了许多相关且已解决的问题,但 Ionic 3 没有一个,它目前似乎只支持“点击、按下、平移、滑动、旋转和捏合”(https://ionicframework.com/docs/components/#gestures)。 而且这些似乎都没有在开始时提供“处理程序”,而只是在结束时提供。我看到他们确实提供了触摸持续时间(deltaTime)的数据,但到那时它对我的目的没有用处。

对于更多上下文,我想要的是在屏幕第一次触摸元素时清除相关超时,然后查看对同一特定元素的触摸是否在特定时间内结束(例如250 ms,因此可以将其评估为“点击”)。

例如这样的:

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>

高精度(低至毫秒)非常重要,尤其是对于触摸开始时间。

感谢任何建议。

【问题讨论】:

  • 是否需要touchstart和touchend事件。如果你需要这个你需要哪个元素
  • 如上所述,我需要开始和结束。它可以是任何常规的 HTML 元素,例如一个按钮,在这种情况下它看起来像这样:&lt;button ion-button type="button" (button_touch_started)="touched()"&gt;Touch this button&lt;/button&gt;(或者如果它是一个 &lt;div&gt; 会有所不同吗?)
  • 我会在答案中放一个代码示例,请检查

标签: html ionic3 touch dom-events touchstart


【解决方案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);
  }

【讨论】:

  • 您在移动设备或浏览器中运行的位置。触摸事件将在移动设备中工作,在浏览器中切换到移动视图并检查 touchstart 和 touchend 将工作检查此demo
  • 非常感谢您的超快速和完美的回复。实际上我做了基本相同的事情,但你的回复让我做了更多的测试,我意识到这确实是正确的,但只是这个事件在我一直在测试的浏览器上通常不起作用。但现在我尝试了一个移动设备模拟 (developers.google.com/web/tools/chrome-devtools/device-mode) - 它运行良好。希望这对其他人也有帮助。
  • 对于您上面的评论:是的,我刚刚意识到这一点,所以在您回复之前我已经删除了我之前的评论。但再次感谢。
猜你喜欢
  • 2012-05-11
  • 2017-04-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-05-16
  • 2012-06-05
  • 1970-01-01
相关资源
最近更新 更多