当手指不再在元素上(但仍按下)时停止 TOUCHMOVE 事件

Question

我有一个div(#parent(，里面有4个子元素。 这个想法是，当我触摸<跨度>元素之一并移动手指时，我会触发事件(触摸移动(，当我将手指移动到当前<跨度之外时>(同时仍然按下(事件应该停止。

我试图通过检查我是否触及跨度>或其他元素来获得这项工作<但没有运气。一旦我按下并移动，我无法在松开手指之前停止事件。>

document.querySelector("#parent").addEventListener('touchmove', (e) => {
console.log(`pressed ${e.target.getAttribute('data-dir')}`)
});
<div id="parent">
<span data-dir="3">&uarr;</span>
<span data-dir="0">&rarr;</span>
<span data-dir="1">&darr;</span>
<span data-dir="2">&larr;</span>
</div>

Answer 1

1. 首先，您可以使用document.elementFromPoint()API 来判断您的手指是在<span>内部还是外部。
2. 然后，您可以通过removeEventListener来停止事件。在移动过程中，如果手指在<span>之外，只需移除听者即可。

喜欢这个：

const $el = document.querySelector("#parent")
$el.addEventListener('touchstart', function startHandler(e) {
$el.addEventListener('touchmove', function moveHandler(e) {
if (document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY).tagName !== 'SPAN') {
$el.removeEventListener('touchmove', moveHandler)
}) else {
// do your things
}
});
$el.addEventListener('touchend', function endHandler(e){
// remove the listeners to avoid mutiple listeners
$el.removeEventListener('touchstart', startHandler)
$el.removeEventListener('touchmove', moveHandler)
$el.removeEventListener('touchend', endHandler)
})
})