Chrome中的touchmove期間event.target不變

Question

我有一個包含子元素的div。 在觸摸動作中，我需要目標元素。 但是目標元素在chrome中保持不變

小提琴鏈接： https://jsfiddle.net/660rdys9/1/ : 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

按照SO問題的答案， 如何找出touchmove javascript事件的實際event.target？ ，我們可以使用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"/>