jQuery是否保留触摸事件属性？

Question

虽然这段代码在触摸屏幕时会产生预期的行为"1":

document.getElementById('someNodeId').addEventListener('touchmove', touch, true);

function touch(evt) {
  evt.preventDefault();
  alert(evt.changedTouches.length);     
  }

使用jQuery选择器相同的代码：

 $('#someNodeId').bind('touchmove', touch);

出现错误：“TypeError: Result of expression 'evt.changedTouches'[undefined] is not an object”。

（设备 = iPod Touch OS 3.1.3 (7E18); jQuery 1.4.2）。

为什么会出现这种情况？我做错了什么？

- Bambax

Answer 1

尝试一下

$(document).ready (function () {
    $("#someNodeId").bind("touchmove", function (event) {
        var e = event.originalEvent;
        console.log(e.targetTouches[0].pageX);
    });
});

- Fred Bergman

---

解释为什么需要 originalEvent 对于不熟悉 jQuery 事件规范化的 OP 和其他人会很有帮助。 - Anurag

的确；解释在这里找到：https://dev59.com/-EbRa4cB1Zd3GeqP5PbV为了“修复”事件，jQuery会克隆事件。在此过程中，出于性能原因，它只复制了有限数量的属性。但是，您仍然可以通过event.originalEvent属性访问原始事件对象。实际上，我不确定在iPhone上使用jQuery是否非常有用；我之前使用它是因为jQTouch，但现在我正在远离它。 - Bambax

Answer 2

我在基于 JQuery 的项目中使用这个简单的函数。

var pointerEventToXY = function(e){
  var out = {x:0, y:0};
  if(e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel'){
    var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
    out.x = touch.pageX;
    out.y = touch.pageY;
  } else if (e.type == 'mousedown' || e.type == 'mouseup' || e.type == 'mousemove' || e.type == 'mouseover'|| e.type=='mouseout' || e.type=='mouseenter' || e.type=='mouseleave') {
    out.x = e.pageX;
    out.y = e.pageY;
  }
  return out;
};

例子：

$('a').on('mousemove touchmove', function(e){
   console.log(pointerEventToXY(e)); // will return obj ..kind of {x:20,y:40}
})

希望这对你有所帮助；）

- Nedudi