问题
I am working on a Javascript / html5 project for iPad.
I need to be able to catch touchmove events on an element that does not get added to the DOM
until after a touchstart
event has fired (i.e. until after a person has put their finger on the screen.)
I have tried simulating a touchstart
event and firing it programatically...
$( "#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 doStuff
to start firing is to lift my finger and then touch the screen again, triggering a second touchstart
event.
How can I catch touchmove
events on an element that is added to the DOM
after my finger is already on the screen?
回答1:
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.
If this interpretation is correct, then the answer is to to handle touchmove events on the same element that 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).
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.
DEMO
回答2:
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/
I checked this on my ipad simulator. I replaced the alert with append so you don't get constantly alerted on 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
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;
}
The move actually triggers on the already created div wrapper which is in the same spot as the created element
回答3:
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
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)
来源:https://stackoverflow.com/questions/25919955/how-can-i-catch-touchmove-events-on-an-element-that-is-added-to-the-dom-after-my