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

我正在为iPad开发一个javascript / html5项目。

我需要能够在一个元素上捕获touchmove事件，直到touchstart事件触发后（即直到一个人将手指放在屏幕上之后）才会添加到DOM 。

我试过模拟一个touchstart事件并以编程方式触发它…

 $( "#container" ).append( element ); element.on( "touchmove", doStuff ); var ev = $.Event( "touchstart" ); element.trigger( ev ); 

……但这不起作用。 我可以让doStuff开始射击的唯一方法是抬起我的手指，然后再次触摸屏幕，触发第二次touchstart事件。

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

Answer 1

总而言之，您似乎想要：

• 在touchstart上：显示和定位样式化的div元素。
• on touchmove：拖动元素而不释放并重新按下鼠标按钮 。

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

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

 var $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

Answer 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 = $("
"); $( "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

CSS

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

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

Answer 3

请参阅文档可拖动function

应用你的function

 
 
Drag Me
  

原生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)