Javascript 在我的手指已经在屏幕上之后，如何在添加到 DOM 的元素上捕获 touchmove 事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25919955/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I catch touchmove events on an element that is added to the DOM after my finger is already on the screen?
提问by user1031947
I am working on a Javascript / html5 project for iPad.
我正在为 iPad 开发一个 Javascript / html5 项目。
I need to be able to catch touchmove events on an element that does not get added to the DOMuntil after a touchstartevent has fired (i.e. until after a person has put their finger on the screen.)
我需要能够在一个元素上捕获 touchmove 事件，该元素DOM在touchstart事件触发之前（即，直到一个人将手指放在屏幕上之后）才被添加到。
I have tried simulating a touchstartevent and firing it programatically...
我试过模拟一个touchstart事件并以编程方式触发它......
$( "#container" ).append( element );
element.on( "touchmove", doStuff );
var ev = $.Event( "touchstart" );
element.trigger( ev );
...however this does not work. The only way I can get doStuffto start firing is to lift my finger and then touch the screen again, triggering a second touchstartevent.
......但是这不起作用。我可以doStuff开始射击的唯一方法是抬起我的手指，然后再次触摸屏幕，触发第二个touchstart事件。
How can I catch touchmoveevents on an element that is added to the DOMafter my finger is already on the screen?
如何在我的手指已经在屏幕上之后touchmove添加到的元素上捕获事件DOM？
采纳答案by Roamer-1888
To summarise, you appear to want :
总而言之，您似乎想要：
- on touchstart: to display and position a styled div element.
- on touchmove: to drag the element without releasing and re-pressing the mouse button.
- 在 touchstart 上：显示和定位样式化的 div 元素。
- on touchmove：在不释放和重新按下鼠标按钮的情况下拖动元素。
If this interpretation is correct, then the answer is to to handle touchmove events on the same elementthat was originally clicked on - namely the "body" element. It is not necessary to handle touchmove events of the element you want to drag (the added element).
如果这种解释是正确的，那么答案是在最初单击的同一元素上处理 touchmove 事件- 即“body”元素。不需要处理要拖动的元素（添加的元素）的 touchmove 事件。
There must be many ways to write the code. Here's one, which is probably not exactly what you want (chiefly in the positioning maths) but should be simple to adapt :
必须有很多方法来编写代码。这是一个，这可能不是您想要的（主要是定位数学），但应该很容易适应：
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 allow for desktop testing and can be removed for touch device usage.
mousedown/mousemove/mouseup 允许进行桌面测试，并且可以在触摸设备使用时移除。
回答by Huangism
If you just need it to trigger once then it is quite easy
如果你只需要它触发一次，那么它很容易
function addElement() {
$( "body" ).append( element );
element.on( "touchmove", doStuff );
element.trigger("touchmove");
}
http://jsfiddle.net/rx4qdtuj/8/
http://jsfiddle.net/rx4qdtuj/8/
I checked this on my ipad simulator. I replaced the alert with append so you don't get constantly alerted on ipad.
我在我的 ipad 模拟器上检查了这个。我用 append 替换了警报，这样你就不会在 ipad 上不断收到警报。
If you want it to continually trigger, the only possible thing I can think of was to fake the touchmove on the created element
如果您希望它不断触发，我能想到的唯一可能的事情就是在创建的元素上伪造 touchmove
http://jsfiddle.net/rx4qdtuj/9/
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
HTML
<div class="wrapper"></div>
CSS
CSS
.wrapper {
position: absolute;
top: 100px;
left: 100px;
width: 300px;
height: 300px;
}
The move actually triggers on the already created div wrapper which is in the same spot as the created element
移动实际上在已创建的 div 包装器上触发，该包装器与创建的元素位于同一位置
回答by alessandrio
see documentation draggable function
applicate you function
应用你的功能
<div id="track" class="track">
<div id="box2" style="left:0; top:0">Drag Me</div>
</div>
native javascript
原生 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)
