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

我正在尝试让一个网络应用程序在平板电脑上运行。我实际上不需要平板电脑上的留言板，只需要mousedown mouseup和mousemove的等价物

然而，触摸事件似乎会产生干扰，并且似乎无法提供我需要的坐标数据

我真正想要的是与clientX、clientY或类似的产品等价的产品，但这些触控事件在iPad上肯定没有。鼠标事件似乎被触摸事件吞噬了。在事件数据中似乎没有其他字段可以利用

我不想添加jq mobile或ui来扩充代码。看来

建议

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

代码如下：

HTML:

JS:

函数f（e）{
用于（e中的变量i）{
如果（i==“IsimmediatePropagationsToped”）继续；
如果（i==“isPropagationStopped”）继续；
如果（i==“停止即时复制”）继续；
如果（i==“停止播放”）继续；
如果（i==“预防默认”）继续；
如果（i==“handleObj”）继续；
如果（i==“数据”）继续；
如果（i==“delegateTarget”）继续；
如果（i==“attrChange”）继续；
如果（i==“attrName”）继续；
如果（i==“relatedNode”）继续；
如果（i==“src元素”）继续；
如果（i==“altKey”）继续；
如果（i==“气泡”）继续；
如果（i==“可取消”）继续；
如果（i==“ctrlKey”）继续；
如果（i==“currentTarget”）继续；
如果（i==“eventPhase”）继续；
如果（i==“元键”）继续；
如果（i==“relatedTarget”）继续；
如果（i==“shiftKey”）继续；
如果（i==“目标”）继续；
如果（i==“视图”）继续；
如果（i==“which”）继续；
如果（i==“按钮”）继续；
如果（i==“按钮”）继续；
//如果（i==“clientX”）继续；
如果（i==“clientY”）继续；
如果（i==“fromElement”）继续；
//如果（i==“offsetX”）继续；
如果（i==“offsetY”）继续；
//如果（i==“pageX”）继续；
如果（i==“pageY”）继续；
//如果（i==“screenX”）继续；
如果（i==“屏幕显示”）继续；
如果（i==“toElement”）继续；
如果（i.substr（0，6）=“jQuery”）继续；
如果（i==“时间戳”）继续；
如果（i==“isDefaultPrevented”）继续；
//如果（i==“类型”）继续；
如果（i==“originalEvent”）继续；
$（“#log”）.prepend（i+”：“+e[i]+”
”；
}    
}    
$（文档）.ready（函数（）{
//美元（“#abc”）。在（“mousemove”，f）；
美元(abc).on(mousedown,f);；
美元(abc).on(touchmove,f);；
美元(abc).on(touchstart,f);；
});    

发帖：

touchstart

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

等价物：mousedown

touchend

动作：当一个手指从屏幕上抬起时触发（单点触摸真的很挑剔）

等价物：鼠标

触摸移动

操作：当一个或多个手指在屏幕上移动时激发

等价物：mousemove

要获得与clientX的等价物，clientY：尝试仅从触摸设备中使用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>");
}    

touchMe[0]。ontouchstart=函数（e）{
html（“触摸启动”）；
var touche=e.touchs[0]；
//在touch事件中，我们必须像这样访问e.touch[0].clientX，而不是e.clientX。
log.append（“X:+touche.clientX+”Y:+touche.clientY）；
log.append（“
”）；
}    

---

此外，这可能对您有所帮助。

触摸设备可能有点喜怒无常。安卓操作系统与iOS操作系统不同，等等。 经过大量调试，我发现该例程运行良好（为了简单起见，我只使用了X值）：

请注意

touchcancel

事件，因为当移动处理程序执行时间超过一秒钟时，它可能会启动

以上几点：

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

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

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

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