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

我正在为iPad做一个Javascript/html5项目

我需要能够捕获元素上的touchmove事件，该元素在触发

touchstart

事件之前（即，在用户将手指放在屏幕上之前）不会添加到

DOM

我尝试过模拟一个

touchstart

事件并以编程方式启动它

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

…但是，这不起作用。我能让

doStuff

启动的唯一方法是抬起手指，然后再次触摸屏幕，触发第二个

touchtstart

事件

在我的手指已经在屏幕上之后，如何捕捉添加到

DOM

的元素上的

touchmove

事件

应用您的功能

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

window.addEventListener（'load'，function（）{
var box2=document.getElementById（'box2'），
boxleft，//移动框的左位置
startx，//接触点的起始x坐标
距离=0，//接触点移动的距离
touchobj=null//Touch对象保持器
框2.addEventListener（'touchstart'，函数（e）{
touchobj=e.changedTouches[0]//参考第一个接触点
boxlight=parseInt（box2.style.left）//获取框的左位置
startx=parseInt（touchobj.clientX）//获取接触点的x坐标
e、 preventDefault（）//防止默认单击行为
}，错）
框2.addEventListener（'touchmove'，函数（e）{
touchobj=e.changedTouches[0]//引用此事件的第一个接触点
var dist=parseInt（touchobj.clientX）-startx//计算按接触点移动的距离
//根据起始位置和距离移动箱子
//下限为0，上限为380，这样它就不会在轨道外移动：
box2.style.left=（（boxleft+dist>380）？380：（boxleft+dist<0）？0:boxleft+dist）+“px”
e、 预防默认值（）
}，错）
}，错）

如果您只需要触发一次，那么它非常容易

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

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

我在我的ipad模拟器上检查了这个。我用append替换了警报，这样你就不会在ipad上经常收到警报

如果你想让它持续触发，我能想到的唯一可能的事情就是在创建的元素上伪造touchmove

---

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

• 在touchstart上：显示和定位已设置样式的div元素
• 触摸移动：在不释放并重新按下鼠标按钮的情况下拖动元素

如果这种解释是正确的，那么答案就是在最初单击的同一元素上处理touchmove事件，即“body”元素。无需处理要拖动的元素（添加的元素）的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'
    });
}

var$element=$（“”）；
$（“正文”）。在({
“touchstart mousedown”：函数（e）{
$element.appendTo（“正文”）；
$（this）.on（'touchmove mousemove'，move）；
move（e）；//您可以执行`$（this）.trigger（'touchmove'，e）`但是传统的函数调用使'move'保持简单。
},
“touchend mouseup”：函数（e）{
$（this.off（'touchmove mousemove'）；
}
});
功能移动（e）{
$element.css({
左：（e.pageX-10）+“px”，
顶部：（e.pageY-10）+“px”，
光标：“指针”
});
}

mousedown/mousemove/mouseup允许进行桌面测试，并且可以在触摸设备使用时移除

---

你能对你在这里写的内容添加解释吗？这是我答案开头的链接，因为它非常长。然后粘贴或创建一个简短版本的解释并放在这里。如果有一天链接断开了，那么代码注释中将没有明确解释。具体问题是什么？这并不能回答我的问题。我想问的是，如何识别一个元素上的touchmove事件，该元素在手指出现在屏幕上之前不会添加到DOM中，因此不会触发touchstart事件。是否可以在该元素上创建此问题的简化版本？我对draggables不太熟悉，但如果我能玩一下，也许我们能想出一些更安全的东西，在这里摆弄：我不确定事件的触发，但如果你的目标是在你的手指第一次触摸时移动盒子，那么你可能必须获得鼠标的x和y/触摸并相应地移动盒子。目标不是拖动-我最初的措辞是错误的-目标是让touchmove事件开始启动新的元素，当我的手指在它上面刷的时候-不必提起我的手指再把它放下。出于一些原因，我无法在父元素上收听touchstart/touchmove事件-它必须在新添加的元素上。哦，我明白了，我可以让它触发一次，但它无法识别您最初触摸时的移动。不幸的是，我需要touchmove自己启动，并反复启动。啊，我明白了。不幸的是，这在我的情况下也不起作用。我不能监听父元素上的事件（复杂…），我只能监听添加到DOM中的元素上的事件。@user1031947为什么不能？此元素仅用于捕获touchmove。您可以使用它对刚创建的元素执行任何需要的操作。事实上，它可以在touchmove完成后移除。很抱歉，它不是父元素，它只是另一个与创建的元素放在同一位置的元素，因为IRL这是一个嵌入在SJS层中的webView，直到触摸启动后才可见

<div class="wrapper"></div>

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

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