event.target не изменен во время touchmove в chrome

Question

У меня есть div с дочерними элементами. При перемещении касания мне нужен элемент-мишень. Но целевой элемент остается таким же в хроме

Fiddle ссылка:https://jsfiddle.net/660rdys9/1/

var parent = document.getElementById("parent"); 
 
var textbox = document.getElementById("textbox"); 
 
parent.ontouchmove = function(e){ 
 
\t 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) Goto скрипку в ссылке выше, используя хром

2) Нажмите любую из черного прямоугольника (первый DIV), и переместите палец на другой прямоугольник (второй ребенок дел)

3) Вы можете увидеть на дисплее в текстовом поле идентификатор остается тем же

ли это поведение события touch move? невозможно ли получить правильный целевой элемент во время движения касания?

Примечание: 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); 
 
\t 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"/>