Question

我有一个带有子元素的div。在触摸移动中，我需要目标元素。但目标元素在chrome中保持相同

小提琴链接： https://jsfiddle.net/660rdys9/1/

var parent = document.getElementById("parent");
var textbox = document.getElementById("textbox");
parent.ontouchmove = function(e){
	textbox.value = e.target.id;
}

div > div{
  border:2px solid;
}

<div id="parent" style="width:500px;height:300px;">
<div style="width:500px;height:200px;" id="first">First Span</div>
<div style="width:500px;height:200px;" id="second">Second Span</div>
</div>
<input type="text" id="textbox"/>

复制程序：

1）使用chrome

转到上面的链接

2）触摸任何一个黑色矩形（第一个div）并将手指移动到另一个矩形（第二个子div）

3）您可以看到文本框中显示的ID保持不变

这是触摸移动事件的行为吗？触摸移动期间是否无法获得正确的目标元素？

注意：在鼠标移动过程中，event.target是正确的

Answer 1

根据问题How to find out the actual event.target of touchmove javascript event?中的答案，我们可以使用document.elementFromPoint方法作为解决方法

示例代码：

var parent = document.getElementById("parent");
var textbox = document.getElementById("textbox");
parent.ontouchmove = function(e){
    var target = document.elementFromPoint(e.originalEvent.changedTouches[0].clientX, e.originalEvent.changedTouches[0].clientY);
	textbox.value = target.id;
}

div > div{
  border:2px solid;
}

<div id="parent" style="width:500px;height:300px;">
<div style="width:500px;height:200px;" id="first">First Span</div>
<div style="width:500px;height:200px;" id="second">Second Span</div>
</div>
<input type="text" id="textbox"/>

在touchmove chrome期间，event.target没有改变

1 个答案: