Question

我正在创建一个需要跨浏览器兼容的移动网站。对于一个功能，我需要检测触摸事件的位置。

Windows Phone不支持touchstart等，所以我使用的是mousedown，但是我无法从事件中获取页面位置。它在桌面上没有问题，并且在Windows手机上检测到mousedown，但我无法弄清楚如何获得offsetX - 偏移Y.

这是一个适用于桌面，iphone和android的示例（我使用jquery但没有插件或任何非标准的）：

$("div").on("touchstart mousedown", function(e){
    org_x = e.originalEvent.changedTouches[0].pageX ? e.originalEvent.changedTouches[0].pageX : e.originalEvent.offsetX;
    alert(org_x);

    org_y = e.originalEvent.changedTouches[0].pageY ? e.originalEvent.changedTouches[0].pageY : e.originalEvent.offsetY;
    alert(org_y);
});

我在Windows Phone 8和9上测试了这个

Answer 1

试试这段代码，它会正常工作

document.getElementById("clickdiv").addEventListener("MSPointerDown",handleDown,false);

function handleDown(evt) {
    alert(evt.originalEvent.layerX);
}

$("#clickdivalt").on("MSPointerDown", handleAltDown);

function handleAltDown(evt){
    alert(evt.originalEvent.layerX);
}

Answer 2

从我看到你想阅读这篇文章：Touch/Gestures On Mobile Devices或看看这个堆栈溢出问题：Windows phone 8 touch support

我仍然看着箭头，并会在找到它们时用更好的解决方案更新我的答案！

Answer 3

isues width MSPonterDown等似乎是一个jquery bug / inccompatablility。如果我使用纯javascript设置事件处理程序，我可以获取pageX和pageY属性。如果我使用jquery设置事件处理程序，则没有pageX pageY。

document.getElementById("clickdiv").addEventListener("MSPointerDown",handleDown,false);

function handleDown(evt) {
    alert(evt.pageX);
}

$("#clickdivalt").on("MSPointerDown", handleAltDown);

function handleAltDown(evt){
    alert(evt.pageX);
}

Windows手机上的javascript mousedown事件位置

3 个答案: