javascript - 为什么当元素更新位置时 touchmove 会被中断？

Question

我有 svg 元素，它们根据 mousemove 事件中的鼠标位置进行更新。我尝试通过将 touchmove 绑定(bind)到元素来执行相同的操作，但是当移动元素时，touchmove 停止工作，并且元素在完全停止事件之前会稍微卡顿。有没有办法防止 touchmove 在元素更新位置时取消？

$('svgCanvas').mousedown(function(e){
    // here I get element mouse is over
}

$('svgCanvas').mousemove(function(e){
    // here I update the position of the element based on e.pageX, e.pageY
    // the elements are saved in an array which updates as it moves
    Update();
}

//The function I'm trying to make work:
$('svgCanvas').bind('touchmove', function(e){
    e.preventDefault();
    var x = e.originalEvent.touches[0].pageX;
    var y = e.originalEvent.touches[0].pageY;
    if(elem){
       // elem is the element I get from mousedown (which also work on touch)
       elem.position[x,y];
    }
Update();
}

现在 Update() 的作用是从我拥有的元素数组中重新绘制屏幕上的所有 svg 元素。我很确定这就是问题所在，因为触摸事件一旦运行一次就会停止工作。然而，mousemove 事件与之配合得很好。

编辑:添加了问题的片段。

$(document).ready(function() {
  // Initialize variables
  var draw = SVG.get('svgCanvas'),
    group = draw.group().id('svgGroup'),
    clicking = false,
    data = [],
    newSvgElement = {},
    color = "#6658A4",
    elem;

  // Create a new svg element on click
  $('#image').click(function(e){
    var x = e.pageX;
    var y = e.pageY;
    var rand = Math.floor(Math.random() * 100000000);

    if(document.getElementById('createElement').checked){
      //Add the svg to an array as an Object
      newSvgElement.size = 30;
      newSvgElement.id = 'svgElement' + rand;
      newSvgElement.position = [x,y];
      data.push( Object.assign({}, newSvgElement) );
    }
    // Redraws all svg objects in the data[] array
    Update();
  });

  // Stop dragging the svg
  $("#svgCanvas").mouseup(function(){
    clicking = false;
  });

  // Drag the svg on mouse
  $("#svgCanvas").mousemove(function(e){
    if(clicking && document.getElementById("moveElement").checked){
      var x = e.pageX, y = e.pageY;

      if(elem){
        elem.position = [x,y];
        Update();
      }
    }
  });
  
  // Drag svg on touch, this is the one I have issues with
  $('#svgCanvas').bind('touchmove', function(e){
    if(document.getElementById("moveElement").checked) {
      var x = e.originalEvent.touches[0].pageX;
      var y = e.originalEvent.touches[0].pageY;
      
      if(elem){
        elem.position = [x,y];
        Update();
      }
    }
  });

  // Get the svg clicked, if its the background we dont want to move anything
  $("#svgCanvas").mousedown(function(e){
    if(document.getElementById("moveElement").checked) {
      var x = e.clientX,
        y = e.clientY,
        elementMouseIsOver = document.elementFromPoint(x, y).id;
      clicking = true;
      elem = dataInPosition(elementMouseIsOver);
    }
  });

  // Redraws every svg in the array
  function Update(){
    $("#svgGroup").empty();

    for (var i = 0; i < data.length; i++) {
      DrawPoint(data[i]);
    }
  }
  
  // Get the id of the clicked svg
  function dataInPosition(id) {
    if(data.length){
      var pos = data.map(function (element) {
        return element.id
      }).indexOf(id);
      return data[pos];
    }
  }

  // Creates the svg element using SVG.js
  function DrawPoint(svgObject){
    var size    = svgObject.size;
    var x       = svgObject.position[0];
    var y       = svgObject.position[1];

    var drawObject = group.circle(size).id(svgObject.id);
    drawObject.attr({
      fill: color,
      'fill-opacity': "0.0",
      stroke: color,
      'stroke-width': size/10,
      cx: x,
      cy: y
    });
  }
});

#form{
  position: absolute;
  left: 30px;
  top: 30px;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.4/svg.js"></script>
<svg id="svgCanvas" height="900px" width="450px">
  <image id='image' xlink:href="http://routegadget.jukola.com/kartat/41.jpg" x="0" y="0" height="900px" width="450px"/>
</svg>
<div id="form">
  <form>
    <input type="radio" name="state" id="createElement" class="state" checked>
    <label for="createElement">Create Element <br/></label>
    <input type="radio" name="state" id="moveElement" class="state">
    <label for="moveElement">Move Element <br/></label>
  </form>
</div>

Answer 1

所以你的小部件是“疯狂的”:)我的意思是它做很多事情效率低下恕我直言。我将其重写为我想要的编写方式。

请检查一下。如果您需要澄清，请告诉我

至于我认为正在发生的事情:

• 问题出在更新功能
• 如果您在 group.clear() 中注释掉第一个操作，该操作会删除所有绘制的圆圈，则 touchmove 将开始在各处生成圆圈...但它会起作用
• 我怀疑 svg.js 做了一些让 touchmove 监听器静音的事情因此我不会依赖这个库
• 但总的来说，当前的方法效率极低:在每个移动事件上重绘整个场景。这里有很多 dom 操作。一旦你有很多圆圈 - 即使你只需要移动一个 - 你也会重新渲染所有内容。

我的代码还不完美，你仍然可以进一步优化它，但它目前的性能应该不错。

// Initialize variables

// mode: on/off
var createMode = true;
// caching DOM stuff:
var svgCanvas = document.getElementById('svgCanvas');
var svgGroupContainer = document.getElementById('svgGroupContainer');
// this will hold our target element:
var elem;

// init method:
function onSVGinit() {
  // this will hold SVG space coordinates:
  var inputCoordinates = svgCanvas.createSVGPoint();
  // adding initial event listeners:
  svgCanvas.addEventListener('mousedown', mouseDown, { passive: true })
  svgCanvas.addEventListener('touchstart', touchDown, { passive: true })
  // on input methods:
  function mouseDown(e) {
    elem = e.target;
    // need to do coordinates conversion to match SVG space:
    inputCoordinates.x = event.clientX;
    inputCoordinates.y = event.clientY;
    inputCoordinates = inputCoordinates.matrixTransform(svgCanvas.getScreenCTM().inverse());
    svgCanvas.addEventListener('mousemove', move, { passive: true })
    svgCanvas.addEventListener('mouseup', end, {passive:true});
  }
  function touchDown(e) {
    elem = e.target
    // need to do coordinates conversion to match SVG space:
    inputCoordinates.x = event.touches[0].clientX;
    inputCoordinates.y = event.touches[0].clientY;
    inputCoordinates = inputCoordinates.matrixTransform(svgCanvas.getScreenCTM().inverse());
    svgCanvas.addEventListener('touchmove', move, { passive: true })
    svgCanvas.addEventListener('touchup', end, {passive:true});
  }
  function move(e) {
    if (!createMode) {
    // need to do coordinates conversion to match SVG space:
    inputCoordinates.x = event.clientX? event.clientX : event.touches[0].clientX;
    inputCoordinates.y = event.clientY? event.clientY : event.touches[0].clientY;
    inputCoordinates = inputCoordinates.matrixTransform(svgCanvas.getScreenCTM().inverse());
    }
    elem.setAttribute("cx", inputCoordinates.x);
    elem.setAttribute("cy", inputCoordinates.y);
  }
  function end(e) {
    // dynamically remove listeners:
    svgCanvas.removeEventListener('touchmove', move, { passive: true });
    svgCanvas.removeEventListener('mousemove', move, { passive: true });
    svgCanvas.removeEventListener('touchup', move, { passive: true });
    svgCanvas.removeEventListener('mouseup', move, { passive: true });
    // if createMode is on - we spawn a circle:
    if (createMode) {
       createCircle()
    }
  }
  // function to create circle element:
  function createCircle() {
    var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle")
    circle.setAttribute("cx", inputCoordinates.x);
    circle.setAttribute("cy", inputCoordinates.y);
    circle.setAttribute("r", 30);
    circle.setAttribute("fill", "transparent");
    circle.setAttribute("stroke","#6658A4")
    svgGroupContainer.appendChild(circle);
  } 
};
function switchMode(e) {
    createMode = !createMode;
}

#form{
  position: absolute;
  left: 30px;
  top: 30px;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.4/svg.js"></script>
<svg id="svgCanvas" height="900px" width="450px" onload="onSVGinit()">
  <image id='image' xlink:href="http://routegadget.jukola.com/kartat/41.jpg" x="0" y="0" height="900px" width="450px"/>
  <g id="svgGroupContainer"></g>
</svg>
<div id="form">
  <form>
    <input type="radio" name="state" id="createElement" class="state" onclick="switchMode()" checked>
    <label for="createElement">Create Element <br/></label>
    <input type="radio" name="state" id="moveElement" class="state" onclick="switchMode()">
    <label for="moveElement">Move Element <br/></label>
  </form>
</div>