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

Question

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

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

我真正想要的是相当于 clientX、clientY 或类似的东西，但这些触摸事件没有它们，在 iPad 上肯定是这样。鼠标事件似乎被触摸事件吞噬了。事件数据中似乎也没有其他字段可供我利用。

我不想添加 jq mobile 或 ui 来增加代码量。看来

建议？

我写这个 fiddle 是为了捕获不同类型的事件。它只是抓取事件并打印事件对象的内容，跳过一堆公共(public)字段:

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帖子:

触摸开始

操作:触摸屏幕时触发(多点触摸也会触发)

等效:鼠标按下

触摸结束

操作:当手指从屏幕上抬起时触发(对于单点触摸来说确实很挑剔)。

等价: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可能对你有帮助。