touchmove 的工作方式与 mousemove 不同答案

【问题标题】：touch move working diffrently than mousemovetouchmove 的工作方式与 mousemove 不同
【发布时间】：2019-11-19 13:08:14
【问题描述】：

如果有三个 div div1,div2,div3 并排。如果我在 div1 上执行 mousedown，然后如果我将鼠标移动到 div2 上，则 div2 mousemove 将被触发，目标为 div2。但是在移动设备中，如果在 div1 上执行相同的操作，甚至 mousedown(touchstart) 并将鼠标移动到 div2 上，那么 mousemove(touchmove) 就会以目标作为 div1 本身触发。我需要移动 touchmove 事件目标作为 div2？

为什么会有不同的行为以及我们能做什么？

以下是我为解释我的问题所做的示例，

    
            var testString = '';
    
            handleMouseMoveListener = (e) => {
                //console.log(e.target.id);
                e.preventDefault();
                e.stopPropagation();
                this.testString = this.testString + ' ' + e.target.id;
            }
    
            handleMouseUpHandler = (e) => {
    
                alert(this.testString);
                this.testString = '';
            }
    
    
            let elementsArray = document.querySelectorAll("div");
            elementsArray.forEach(function (elem) {
                elem.addEventListener('mousemove', this.handleMouseMoveListener);
                elem.addEventListener('touchmove', this.handleMouseMoveListener);
                elem.addEventListener('mouseup', this.handleMouseUpHandler);
                elem.addEventListener('touchend', this.handleMouseUpHandler);
            });

   <!DOCTYPE html>
    <html>
    <head>
        <title>Page Title</title>
    
        <style>
            div {
                display: inline-block;
                width: 150px;
                height: 150px;
                color: red;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
    
    
        <div id='div1'>div1</div>
        <div id='div2'>div2</div>
        <div id='div3'>div3</div>
    

    
    </body>
    </html>

【问题讨论】：

您可以尝试将您的事件监听器添加到文档元素中，并检查该事件的 currentTarget 是否是您需要的。
试过没用。
这适用于 iPad，但不适用于 Android 平板电脑

标签： javascript html

【解决方案1】：

这是the specs defined behavior：

此事件的目标必须与触摸点第一次放置在表面上时开始的元素相同，即使触摸点已经移出目标元素的交互区域。

至于为什么要这样定义...我不太确定，但我认为这可以追溯到 iphone 在市场上独树一帜的时候，规范只是接受了它们的行为，认为它们对我们的网络开发人员来说是违反直觉的可能是。

我们能做什么，它有already been asked and answered before：你可以使用document.elementFromPoint() 中的clientX 和clientY 你的Touch 实例将公开的值：

if( document.ontouchmove === undefined ) {
  console.log( "please enable your dev-tools's Responsive mode" );
}

document.querySelectorAll( '.container div' ).forEach( (elem) => {
  elem.addEventListener( 'touchstart', prevent );
  elem.addEventListener( 'touchmove', handleTouchMove );
} );

function handleTouchMove( evt ) {
  //prevent( evt );
  deactivateTarget(); // clean
  
  evt.target.classList.add( 'target' ); // make the official target's text red

  const touch = evt.changedTouches[ 0 ];
  const actualTarget = document.elementFromPoint( touch.clientX, touch.clientY );
  if( actualTarget ) {
    actualTarget.classList.add( 'active' ); // make the hovered element green
  }
}
function deactivateTarget() {
  document.querySelectorAll( '.active,.target' ).forEach( (elem) => {
    elem.classList.remove( 'active', 'target' );
  })  
}

function prevent( evt ) {
  evt.preventDefault();
}

.container div {
  display: inline-block;
  width: 150px;
  height: 50px;
  border: 1px solid black;
}
.container div.active {
  background: green;
}
.container div.target {
  color: red;
}

<div class="container">
  <div>div1</div>
  <div>div2</div>
  <div>div3</div>
  <div>div4</div>
  <div>div5</div>
  <div>div6</div>
  <div>div7</div>
  <div>div8</div>
  <div>div9</div>
  <div>div10</div>
  <div>div11</div>
  <div>div12</div>
  <div>div13</div>
  <div>div14</div>
  <div>div15</div>
</div>

【讨论】：

我想这就是我需要的。 'document.elementFromPoint(touch.clientX, touch.clientY)'。将测试并回来。
谢谢。这对我来说是“document.elementFromPoint”。