8

我正在为 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

4

3 回答 3

6

总而言之，您似乎想要：

  • 在 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 允许桌面测试并且可以被移除以用于触摸设备。

演示

于 2014-09-19T15:04:05.887 回答
0

如果您只需要触发一次，那很容易

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

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

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

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

如果您希望它不断触发，我能想到的唯一可能的事情就是在创建的元素上伪造 touchmove

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 包装器，该包装器与创建的元素位于同一位置

于 2014-09-18T19:52:08.367 回答
-4

参见文档可拖动功能

应用你的功能

<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)
于 2014-09-18T18:43:53.877 回答