如何在我的手指已经在屏幕上之后添加到DOM的元素上捕获touchmove事件？

3 回答

• 0

  总而言之，您似乎想要：

  触摸开始

  • ：显示和定位样式化的div元素 .
    触摸移动
  • ：拖动元素而不释放并重新按下鼠标按钮 .

  如果这种解释是正确的，那么答案就是处理最初点击的同一元素上的touchmove事件 - 即"body"元素 . 没有必要处理要拖动的元素的touchmove事件（添加的元素） .

  必须有很多方法来编写代码 . 这是一个，这可能不是你想要的（主要是在定位数学中），但应该很容易适应：

  var $element = $("<div class='element' />");
  
  $("body").on({
      'touchstart mousedown': function (e) {
          $element.appendTo("body");
          $(this).on('touchmove mousemove', move);
          move(e);//you could do `$(this).trigger('touchmove', e)` but a conventional function call keeps `move` simple.
      },
      'touchend mouseup': function (e) {
          $(this).off('touchmove mousemove');
      }
  });
  
  function move(e) {
      $element.css({
          left: (e.pageX - 10) + 'px',
          top: (e.pageY - 10) + 'px',
          cursor: 'pointer'
      });
  }
  

  mousedown / mousemove / mouseup允许桌面测试，可以删除触摸设备使用 .

  DEMO

  回复于 2024-04-25T20:59:38+08:00
• -2

  如果你只是需要它来触发一次那么它很容易

  function addElement() {
      $( "body" ).append( element );
  
      element.on( "touchmove", doStuff );
      element.trigger("touchmove"); 
  }
  

  http://jsfiddle.net/rx4qdtuj/8/

  我在我的ipad模拟器上检查过这个 . 我用追加替换了警报，所以你不会在ipad上不断得到警报 .

  如果你想让它不断触发，我能想到的唯一可能的事情就是在创建的元素上伪造touchmove

  http://jsfiddle.net/rx4qdtuj/9/

  var element = $("<div class='element' />");
  
  $( "body" ).on( "touchstart", addElement );
  $(".wrapper").on("touchmove", addElement);
  
  function addElement() {
      $( "body" ).append( element );
  
      element.on( "touchmove", doStuff );
      element.trigger("touchmove"); 
  }
  
  function doStuff() {
      $('body').append('a ')
  }
  

  HTML

  <div class="wrapper"></div>
  

  CSS

  .wrapper {
      position: absolute;
      top: 100px;
      left: 100px;
      width: 300px;
      height: 300px;
  }
  

  移动实际上触发了已创建的div包装器，它与创建的元素位于同一位置

  回复于 2024-04-25T20:59:38+08:00
• 5

  see documentation draggable function

  applicate you function

  <div id="track" class="track">
  <div id="box2" style="left:0; top:0">Drag Me</div>
  </div>
  

  原生javascript

  window.addEventListener('load', function(){
  
   var box2 = document.getElementById('box2'),
   boxleft, // left position of moving box
   startx, // starting x coordinate of touch point
   dist = 0, // distance traveled by touch point
   touchobj = null // Touch object holder
  
   box2.addEventListener('touchstart', function(e){
    touchobj = e.changedTouches[0] // reference first touch point
    boxleft = parseInt(box2.style.left) // get left position of box
    startx = parseInt(touchobj.clientX) // get x coord of touch point
    e.preventDefault() // prevent default click behavior
   }, false)
  
   box2.addEventListener('touchmove', function(e){
    touchobj = e.changedTouches[0] // reference first touch point for this event
    var dist = parseInt(touchobj.clientX) - startx // calculate dist traveled by touch point
   // move box according to starting pos plus dist
   // with lower limit 0 and upper limit 380 so it doesn't move outside track:
    box2.style.left = ( (boxleft + dist > 380)? 380 : (boxleft + dist < 0)? 0 : boxleft + dist ) + 'px'
    e.preventDefault()
   }, false)
  
  }, false)
  

  回复于 2024-04-25T20:59:38+08:00