Как я могу захватить события touchmove на элементе, который добавлен в DOM после того, как мой палец уже находится на экране?

Question

Я работаю над проектом javascript/html5 для iPad.

мне нужно, чтобы быть в состоянии поймать TouchMove события на элементе, который не получает добавленный к DOM, пока после touchstart события уволило (то есть до тех пор, после того, как человек поставил свой палец на экране.)

Я попытался имитируя touchstart событие и обжиг ...

программно

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

... однако это не работает. Единственный способ получить doStuff, чтобы начать стрельбу, - это поднять мой палец, а затем снова коснуться экрана, вызывая второе событие touchstart.

Как я могу поймать touchmove событий на элементе, который добавлен в DOM после того, как мой палец уже на экране?

Answer 1

Чтобы подвести итоги, вы, кажется, хотят:

• на touchstart: для отображения и позиционирования стилизованную DIV элемент.
• на касание: перетащить элемент без отпускания и повторного нажатия кнопки мыши.

Если эта интерпретация верна, то ответ должен обрабатывать TouchMove события на же элемента, который был первоначально щелкнули - а именно элемент «тело». Нет необходимости обрабатывать события 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

Answer 2

see documentation draggable 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) 

Answer 3

Если вам просто нужно, чтобы вызвать один раз, то это довольно легко

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; 
} 

Этот шаг фактически запускает на уже созданный сНу обертку, которая находится в том же месте, что и созданный элемент