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

How can I catch touchmove events on an element that is added to the DOM after my finger is already on the screen?

本文关键字：事件 添加 touchmove 何捕捉 DOM 元素 手指 我的 之后 屏幕      更新时间：2023-09-26

我正在为iPad开发Javascript/html5项目。

我需要能够捕捉元素上的touchmove事件，该元素直到touchstart事件触发后（即，直到一个人将手指放在屏幕上后）才被添加到DOM

我试过模拟touchstart事件并用程序启动它。。。

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

然而，这并不奏效。我能让doStuff开始发射的唯一方法是抬起手指，然后再次触摸屏幕，触发第二个touchstart事件。

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

总之，您似乎想要：

  • ontouchstart：显示和定位一个样式化的div元素
  • on touchmove：拖动元素而不释放并重新按下鼠标按钮

如果这种解释是正确的，那么答案是在最初点击的相同元素上处理touchmove事件，即"body"元素。不需要处理要拖动的元素（添加的元素）的触摸移动事件。

编写代码的方法肯定有很多。这里有一个，可能不是你想要的（主要是在定位数学中），但应该很容易适应：

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

如果你只需要它触发一次，那么就很容易了

function addElement() {
    $( "body" ).append( element );
    element.on( "touchmove", doStuff );
    element.trigger("touchmove"); 
}

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

我在我的ipad模拟器上检查了这个。我用append代替了提醒，这样你就不会在ipad上不断收到提醒。

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

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

移动实际上在已经创建的div包装器上触发，该包装器与创建的元素

位于同一位置

请参阅文档可拖动功能

应用您的功能

<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)
相关文章：