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

Question

我正在为iPad开发一个javascript/html5项目.

我需要能够捕获一个元素上的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元素.
• on touchmove:拖动元素而不释放并重新按下鼠标按钮.

如果这种解释是正确的,那么答案就是处理最初点击的同一元素上的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'
    });
}

mousedown/mousemove/mouseup允许桌面测试,可以删除触摸设备使用.

DEMO