javascript - 当我的手指已经在屏幕上时，如何在添加到 DOM 的元素上捕获 touchmove 事件？

Question

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

我需要能够在 touchstart 事件触发后才添加到 DOM 的元素上捕获 touchmove 事件(即，直到一个人已将手指放在屏幕上。)

我已经尝试模拟 touchstart 事件并以编程方式触发它...

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

...但是这不起作用。让 doStuff 开始触发的唯一方法是抬起手指，然后再次触摸屏幕，触发第二个 touchstart 事件。

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

Answer 1

总而言之，您似乎想要:

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

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

DEMO