Jquery 中的触摸事件似乎缺乏有用的信息

Question

我正在尝试使网络应用程序在平板电脑上运行。我实际上并不需要来自平板电脑的客人，只需要 mousedown mouseup 和 mousemove 等价物。

但是，触摸事件似乎会干扰，并且似乎无法提供我需要的坐标数据。

我真正想要的是 clientX、clientY 或类似的等价物，但这些触摸事件在 iPad 上肯定没有。并且鼠标事件似乎被触摸事件吃掉了。事件数据中似乎也没有我可以利用的其他字段。

我不想添加 jq mobile 或 ui 来增加代码。好像

建议？

我写了这个小提琴来捕捉不同类型的事件。它只是抓取事件并打印事件对象的内容，跳过一堆公共字段：

http://jsfiddle.net/fraserorr/DBe6A/1/embedded/result/

代码如下：

HTML：

<div id='abc'></div>
<div id="log"></div>

CSS：

#abc { width: 200px; height: 200px; background-color: blue;}

JS：

function f(e) {
    for(var i in e) {
        if(i == "isImmediatePropagationStopped") continue;
        if(i == "isPropagationStopped") continue;
        if(i== "stopImmediatePropagation") continue;
        if(i == "stopPropagation") continue;
        if(i == "preventDefault") continue;
        if(i == "handleObj") continue;
        if(i == "data") continue;
        if(i == "delegateTarget") continue;
        if(i == "attrChange") continue;
        if(i == "attrName") continue;
        if(i == "relatedNode") continue;
        if(i == "srcElement") continue;
        if(i == "altKey") continue;
        if(i == "bubbles") continue;
        if(i == "cancelable") continue;
        if(i == "ctrlKey") continue;
        if(i == "currentTarget") continue;
        if(i == "eventPhase") continue;
        if(i == "metaKey") continue;
        if(i == "relatedTarget") continue;
        if(i == "shiftKey") continue;
        if(i == "target") continue;
        if(i == "view") continue;
        if(i == "which") continue;
        if(i == "button") continue;
        if(i == "buttons") continue;
        //if(i == "clientX") continue;
        if(i == "clientY") continue;
        if(i == "fromElement") continue;
        //if(i == "offsetX") continue;
        if(i == "offsetY") continue;
        //if(i == "pageX") continue;
        if(i == "pageY") continue;
        //if(i == "screenX") continue;
        if(i == "screenY") continue;
        if(i == "toElement") continue;
        if(i.substr(0, 6) == "jQuery") continue;
        if(i == "timeStamp") continue;
        if(i == "isDefaultPrevented") continue;
        //if(i == "type") continue;
        if(i == "originalEvent") continue;
        $("#log").prepend(i + ": " + e[i] + "<br/>");
    }    
}    
$(document).ready(function() {
    //$("#abc").on("mousemove", f);
    $("#abc").on("mousedown", f);
    $("#abc").on("touchmove", f);
    $("#abc").on("touchstart", f);
});    

Answer 1

来自this 发帖：

触摸启动

动作：触摸屏幕时触发（多点触摸也会触发）

等效：mousedown

触摸结束

Action：当手指从屏幕上抬起时触发（对于单点触摸来说非常精细）。

等效：mouseup

触摸移动

动作：当一根或多根手指在屏幕上移动时触发。

等效：鼠标移动

要获得 clientX、clientY 的等效项：仅在触摸设备上尝试 this fiddle。

 touchMe[0].ontouchstart = function(e) {        
    log.html("Touch Start");
    var touche= e.touches[0]; 
    //instead of e.clientX, in touch event we have to acess like this    e.touches[0].clientX.
    log.append("X :" + touche.clientX + "Y :" +touche.clientY);
    log.append("</br>");
}    

另外，this reference 可能对您有所帮助。

Answer 2

触控设备可能有点喜怒无常。 Android 的行为与 iOS 等不同。 经过大量调试，我发现这个例程运行良好（为简单起见，我只使用 X 值）：

var getCurrentValue = function( sourceEvent ) {
    var value = sourceEvent.pageX;

    // Android
    if ( !value && sourceEvent.touches && sourceEvent.touches.length ) {
        value = sourceEvent.touches[0].pageX;
    }

    // iOS
    if ( !value && sourceEvent.changedTouches && sourceEvent.changedTouches.length ) {
        value = sourceEvent.changedTouches[0].pageX;
    }

    return value;
};


var $elem = $( 'section' );


$elem.on( 'mousedown touchstart', function( event ) {
    var x = getCurrentValue( event );
    console.log( 'START:', x );
});


$elem.on( 'mousemove touchmove', function( event ) {
    var x = getCurrentValue( event );
    console.log( 'MOVE:', x );
});


$elem.on( 'mouseup touchend', function( event ) {
    var x = getCurrentValue( event );
    console.log( 'END:', x );
});


$elem.on( 'touchcancel', function( event ) {
    console.log( 'AWW SNAP! Apple firing a cancel event, because they can\'t fix Safari performance issues.', event );
});

请注意touchcancel 事件，因为当您的移动处理程序执行时间超过一秒时，它可能会启动。

上面的小提琴：http://jsfiddle.net/6fcbZ/