在 touchstart 中的 DOM 中移动 event.target 后，Javascript touchmove 事件不起作用

Question

我在 svg 元素中有几个 svg use 元素，touchstart/move/end 的事件处理程序附加到 svg 元素。当用户触摸屏幕上的 svg use 元素并四处移动手指时，该元素会根据需要在屏幕上移动。

//Exact code in fiddle is different, this is example
<svg id="parent" viewBox="0 0 1000 1000">
   <use href="test.svg" width="100" height="100" x="100" y="100">
   <use href="test2.svg" width="100" height="100" x="100" y="100">
</svg>

//Exact code in fiddle is different, this is example
let parentSVG = document.getElementById("parent");
parentSVG.addEventListener('touchstart', Handle_DragStart); //mousedown too
parentSVG.addEventListener('touchmove', Handle_Drag); //mousemove too
parentSVG.addEventListener('touchend', Handle_DragEnd); //mouseup too

问题是我希望被拖动的元素始终绘制在其他元素之上，并且元素按 DOM 顺序绘制(首先是 DOM 中的第一个元素)。为了处理这个问题，在我的 touchstart 事件处理程序中，我通过 appendChild() 将用户触摸的元素移动到列表的末尾:

//Exact code in fiddle is different, this is example
let mid_move = false;
function Handle_DragStart (event)
{
   //Needed to ignore other touch events while dragging
   if(mid_move)
      return;
   mid_move = true;

   //The event.target is the svg use element. 
   //It is already attached to the parentSVG. 
   //This just moves it to the end of the list of children. 
   parentSVG.appendChild(event.target);
}

这对 mousedown 和 mousemove 很有效，但对 touchstart 和 touchmove 无效。执行此操作后，touchmove 事件不会触发，直到我第二次触摸屏幕，大概是因为 touchstart 中的 appendChild() 调用处理程序在那一点上没有改变任何东西？

我是否使事件无效？我应该如何处理这种情况？

编辑:

JSFiddle example.//将 append_child 设置为 true/false 以查看行为

Answer 1

我用@JanStránský 建议的修改形式规避了这个问题。我放置了一个覆盖整个拖动区域的透明 svg 矩形作为拖动表面，并将其列在 svg 元素列表的末尾。

然后在处理 touchstart 时，我使用鼠标位置来确定用户正在选择这个清晰的 svg 矩形下方的哪个 svg 元素。然后，我调用了 parentSVG.insertBefore(selected, clear_rect)，以便该元素绘制在所有其他元素之上但在此拖动表面之下(因此后续拖动将起作用)。

可拖动元素全部布置(并吸附到)网格中，因此鼠标位置 -> 选定元素很容易确定。否则，您可能需要按照建议为每个可拖动元素一个清晰的矩形。

这个解决方案似乎阻止我在元素上方使用 CSS 特性 cursor: grab; 因为大的拖动表面挡住了路。也许我会手动实现它。