删除“触摸开始"目标后，不会触发“触摸移动"事件 [英] Touch Move event don't fire after Touch Start target is removed

问题描述

我正在尝试使用下一个模式实现类似拖动的功能:

I'm trying to implement a drag-like functionality using the next pattern:

• 订阅标记Pointer Down事件.
• 当Down事件触发时，请订阅Window Pointer Move和Up事件并删除标记.
• 在移动时执行一些操作.
• 当Up事件触发时，取消订阅"Move and Up".

这适用于Mouse事件，但不适用于Touch事件.删除触摸开始"目标元素后，它们不会触发.我尝试使用指针事件Polyfill ，但是它也不起作用.

This works for Mouse events, but doesn't work for Touch events. They don't fire after Touch Start target element is removed. I tried to use Pointer Events Polyfill but it doesn't work either.

我正在使用Chrome开发工具来模拟触摸事件.参见示例:

I'm using Chrome Dev Tools to emulate touch events. See the sample:

initTestBlock('mouse', {
  start: 'mousedown',
  move: 'mousemove',
  end: 'mouseup'
});
initTestBlock('touch', {
  start: 'touchstart',
  move: 'touchmove',
  end: 'touchend'
});
initTestBlock('touch-no-remove', {
  start: 'touchstart',
  move: 'touchmove',
  end: 'touchend'
}, true);

function initTestBlock(id, events, noRemove) {
  var block = document.getElementById(id);
  var parent = block.querySelector('.parent');
  var target = block.querySelector('.target');
  target.addEventListener(events.start, function(e) {
    console.log(e.type);
    if (!noRemove) {
      setTimeout(function() {
        // Remove target
        target.parentElement.removeChild(target);
      }, 1000);
    }

    function onMove(e) {
      console.log(e.type);
      var pt = getCoords(e);
      parent.style.left = pt.x + 'px';
      parent.style.top = pt.y + 'px';
    }

    function onEnd(e) {
      console.log(e.type);
      window.removeEventListener(events.move, onMove);
      window.removeEventListener(events.end, onEnd);
    }

    window.addEventListener(events.move, onMove);
    window.addEventListener(events.end, onEnd);

  });
}

// Returns pointer coordinates
function getCoords(e) {
  if (e instanceof TouchEvent) {
    return {
      x: e.touches[0].pageX,
      y: e.touches[0].pageY
    };
  }
  return {
    x: e.pageX,
    y: e.pageY
  };
}

window.addEventListener('selectstart', function() {
  return false;
}, true);

.parent {
  background: darkred;
  color: white;
  width: 10em;
  height: 10em;
  position: absolute;
}
.target {
  background: orange;
  width: 4em;
  height: 4em;
}
#mouse .parent {
  left: 0em;
}
#touch .parent {
  left: 11em;
}
#touch-no-remove .parent {
  left: 22em;
}

<div id="mouse">
  <div class="parent">Mouse events
    <div class="target">Drag here</div>
  </div>
</div>
<div id="touch">
  <div class="parent">Touch events
    <div class="target">Drag here</div>
  </div>
</div>
<div id="touch-no-remove">
  <div class="parent">Touch (no remove)
    <div class="target">Drag here</div>
  </div>
</div>

推荐答案

诀窍是隐藏元素直到触摸移动完成，而不是将其删除. 以下是一些示例(在Chrome开发工具中启用触摸模式并选择某些设备或使用真实设备): https://jsfiddle.net/alexanderby/na3rumjg/

The trick is to hide element until touch move finishes, but not to remove it. Here is some example (enable Touch Mode in Chrome Dev Tools and select some device or use real device): https://jsfiddle.net/alexanderby/na3rumjg/

var marker = document.querySelector('circle');
var onStart = function(startEvt) {
  startEvt.preventDefault(); // Prevent scroll
  marker.style.visibility = 'hidden'; // Hide target element
  var rect = document.querySelector('rect');
  var initial = {
    x: +rect.getAttribute('x'),
    y: +rect.getAttribute('y')
  };
  var onMove = function(moveEvt) {
    rect.setAttribute('x', initial.x + moveEvt.touches[0].clientX - startEvt.touches[0].clientX);
    rect.setAttribute('y', initial.y + moveEvt.touches[0].clientY - startEvt.touches[0].clientY);
  };
  var onEnd = function(endEvt) {
    window.removeEventListener('touchmove', onMove);
    window.removeEventListener('touchend', onEnd);
    marker.removeEventListener('touchstart', onStart);
    marker.parentElement.removeChild(marker); // Remove target element
  };
  window.addEventListener('touchmove', onMove);
  window.addEventListener('touchend', onEnd);
};
marker.addEventListener('touchstart', onStart);

<svg>
  <circle r="20" cx="50" cy="20" cursor="move"/>
  <rect x="10" y="50" width="80" height="80" />
</svg>

这篇关于删除“触摸开始"目标后，不会触发“触摸移动"事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！