Android浏览器:touchcancel被解雇了,而touchmove已经阻止了默认

Question

Android浏览器:touchcancel被解雇了,而touchmove已经阻止了默认

Jos*_*eal 14 javascript jquery android webkit touch

我正在尝试构建一个网页,用于感知用户的触摸,并沿着画布拖动和对象.

所以我做的是这样的:

var touchStart = function(e) {
    e.preventDefault();
    // Do stuff
}
var touchMove = function(e) {
    e.preventDefault();
    console.log("Touch move");
    // Move objs
}
var touchEnd = function(e) {
    e.preventDefault();
    console.log("Touch start!");
    // clean up stuff
}
var touchCancel = function(e) {
    e.preventDefault();

    // Oh NO touch cancel!
    console.log("Touch cancel!");

}
bindElemOrig.addEventListener('touchstart', touchStart, false);
bindElemOrig.addEventListener('touchmove', touchStart, false);
bindElemOrig.addEventListener('touchend', touchStart, false);
bindElemOrig.addEventListener('touchcancel', touchStart, false);

Run Code Online (Sandbox Code Playgroud)

它工作正常,直到某一点.

问题是,只要我加载太多objs,在我看来touchmove需要太长时间才能响应,而touchcancel会被触发.问题是,一旦touchcancel被触发,我就不会再收到任何touchmove事件,我再也感觉不到了这个动作.

有没有人面对这个问题？我知道Android中你必须调用preventDefault的错误(ios webkit中的touchend事件没有触发？)但是在这种情况下,由于内存负担似乎无法正常工作.

谢谢!

Answer 1

Ric*_*aca 2

此问题可能是由于 Chrome/Android 中的错误（功能？）造成的。请参阅此错误报告。

此测试演示了行为（JSFiddle）：

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script>
      var delay = 200;

      var haltEvent = function(event) {
        event.preventDefault();
        event.stopPropagation();
      };

      var pause = function() {
        var startTime = new Date().getTime();

        while (new Date().getTime() < startTime + delay);
      };

      window.addEventListener('load', function() {
        var target = document.querySelector('#target');
        var status = document.querySelector('#status');

        target.addEventListener('touchstart', function(event) {
          haltEvent(event);
          status.innerHTML = '[touchstart]';
        }, true);

        target.addEventListener('touchmove', function(event) {
          pause();
          haltEvent(event);
          status.innerHTML = '[touchmove]';
        }, true);

        target.addEventListener('touchend', function(event) {
          status.innerHTML = '[touchend]'; 
        }, true);

        target.addEventListener('touchcancel', function(event) {
          status.innerHTML = '[touchcancel]'; 
        }, true);
      });
    </script>
    <style>
      #target {
        background-color: green;
        height: 300px;
      }

      #status {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="target"></div>
    <p id="status">[]</p>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

我没有发现 touchcancel 事件是随机触发的。相反，只要从 touchmove 事件处理程序返回大约 200 毫秒，就会触发它。

归档时间：	11 年前
查看次数：	6050 次
最近记录：	6 年，7 月前