Wie kann ich touchmove-Ereignisse für ein Element abfangen, das dem DOM hinzugefügt wird, nachdem mein Finger bereits auf dem Bildschirm angezeigt wird?

Question

Ich arbeite an einem javascript/html5 Projekt für iPad.

Ich muß in die Lage, Berührungsbewegungsereignisse auf einem Element zu fangen, die nicht die DOM bis hinzugefügt werden erhalten, nachdem ein touchstart Ereignis ausgelöst hat (dh bis nach einer Person, die ihre Finger auf dem Bildschirm gesetzt hat.)

ich habe versucht, ein touchstart Ereignis simuliert und es programmatisch Brennen ...

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

... aber das funktioniert nicht. Der einzige Weg, wie ich doStuff starten kann zu schießen ist, meinen Finger zu heben und dann den Bildschirm wieder zu berühren, ein zweites touchstart Ereignis auszulösen.

Wie kann ich touchmove Ereignisse auf einem Element abfangen, das zu der DOM hinzugefügt wird, nachdem mein Finger bereits auf dem Bildschirm ist?

Answer 1

an der gleichen Stelle ist Zusammengefasst erscheinen Sie wollen:

• auf Berührungsstart: ein Stil div anzuzeigen und zu positionieren Element.
• auf touchmove: um das Element zu ziehen, ohne die Maustaste loszulassen und erneut zu drücken.

Wenn diese Interpretation korrekt ist, dann ist die Antwort auf Berührungsbewegungsereignisse auf dem gleiche Element zu handhaben, die ursprünglich angeklickt wurde - nämlich den „Körper“ Element. Es ist nicht notwendig touchmove-Ereignisse des Elements, das Sie ziehen möchten, zu behandeln (das hinzugefügte Element).

Es muss viele Möglichkeiten geben, den Code zu schreiben. Hier ist eine, die wahrscheinlich nicht genau das ist, was man (vor allem in den Positionierungs Mathematik) wollen, aber sollte einfach sein, sich anzupassen:

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 für Desktop-Tests ermöglichen und kann für Touch-Gerätenutzung entfernt werden .

DEMO

Answer 2

see documentation draggable function

applicate Sie

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

nativen 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

Wenn Sie es einfach funktionieren müssen einmal auszulösen, dann ist es ganz einfach

function addElement() { 
    $("body").append(element); 

    element.on("touchmove", doStuff); 
    element.trigger("touchmove"); 
} 

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

Ich habe dies auf meinem ipad Simulator überprüft. Ich habe den Alarm durch append ersetzt, damit Sie nicht ständig auf dem ipad gewarnt werden.

Wenn Sie es ständig auslösen wollen, die einzig mögliche, was ich war von gefälschten denken kann an der Berührungsbewegungs auf das erstellte Element

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

Der Umzug löst tatsächlich auf dem bereits div-Wrapper erstellt, die als das erstellte Element