'touchstart' 事件是否有与点击事件相同的 e.PageX 位置？答案

【问题标题】：Is there an equivalent to e.PageX position for 'touchstart' event as there is for click event?'touchstart' 事件是否有与点击事件相同的 e.PageX 位置？
【发布时间】：2011-06-14 10:17:57
【问题描述】：

我正在尝试使用 jQuery 获取 touchstart 事件的 X 位置，与 live 功能一起使用？

即

$('#box').live('touchstart', function(e) { var xPos = e.PageX; } );

现在，这确实适用于“点击”作为事件。我到底如何（不使用 alpha jQuery Mobile）通过触摸事件获得它？

有什么想法吗？

感谢您的帮助。

【问题讨论】：

我为那些需要帮助的人找到了这个：- stackoverflow.com/questions/3183872/… 它也适用于 touchstart。

标签： javascript jquery events click touch

【解决方案1】：

如果您不使用 jQuery... 您需要访问事件的 TouchLists 之一以获取具有 pageX/Y clientX/Y 等的 Touch 对象。

以下是相关文档的链接：

就我而言，我使用的是e.targetTouches[0].pageX。

【讨论】：

【解决方案2】：

我在这里尝试了其他一些答案，但 originalEvent 也未定义。经过检查，发现了一个 TouchList 分类属性（如另一张海报所建议的那样）并设法以这种方式到达 pageX/Y：

var x = e.changedTouches[0].pageX;

【讨论】：

这适用于所有基于 javascript 的代码。螺丝jquery
我的救星！即使对于 touchmove() 也能完美运行。

【解决方案3】：

有点晚了，但您需要访问原始事件，而不是 jQuery 按摩的事件。此外，由于这些是多点触控事件，因此需要进行其他更改：

$('#box').live('touchstart', function(e) {
  var xPos = e.originalEvent.touches[0].pageX;
});

如果您想要其他手指，可以在触摸列表的其他索引中找到它们。

更新 JQUERY：

$(document).on('touchstart', '#box', function(e) {
  var xPos = e.originalEvent.touches[0].pageX;
});

【讨论】：

你的结尾少了一个括号，应该是：})
没错。惊讶2年没人注意到！ =) 谢谢！
不幸的是，我没有用，我最终不得不在第一个 touchmove 上获得 x 和 y。
@andrewb，在touchstart 事件处理程序中添加e.preventDefault()。
谢谢哥们。好吧e.touches[0].pageX; 为我工作

【解决方案4】：

我将这个简单的函数用于基于 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('mousedown touchstart', function(e){
  console.log(pointerEventToXY(e)); // will return obj ..kind of {x:20,y:40}
})

希望这对你有用；）

【讨论】：

无需检查事件类型，因为 e.pageX 将未定义触摸事件。就做out.x = e.pageX || e.originalEvent.touches[0].pageX;
在返回之前，我添加这部分以获取基于父元素的百分比位置，以防它帮助任何人... var offsetParent = e.target.offsetParent; var parentLeft = e.target.offsetParent.offsetLeft; out.percentX = (out.x - offsetParent.offsetLeft) / offsetParent.offsetWidth; out.percentY = (out.y - offsetParent.offsetTop ) / offsetParent.offsetHeight;退出；
if(e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel'){ -> if (e.type.startsWith("touch")) ?
@Griffin - 我认为您的建议的问题在于，在桌面上，当鼠标位于文档的左边缘时，您的语句的第一个分支将产生 0，这被解释为 false ，然后浏览器错误，因为在第二个分支上未定义触摸。同意吗？

【解决方案5】：

检查 Safari developer reference on Touch class。

据此，pageX/Y 应该可用 - 也许您应该检查拼写？确保它是pageX 而不是PageX

【讨论】：