页面滚动后，Firefox for Android 上的可拖动交互中断

Question

我正在开发一个 javascript 可拖动交互，它必须同时使用鼠标和触摸输入，并且 没有任何依赖项。到目前为止，它在台式机和移动设备上运行良好。

除 Firefox for Android 外，显示以下行为：

• 页面未滚动：正常
• 页面垂直滚动：元素只能水平拖动
• 页面水平滚动：元素只能垂直拖动
• 页面垂直和水平滚动：元素不能 完全被拖了
• 滚动页面回到最顶部和左侧：元素可以拖动为 再次期待

代码：

var evtStart, evtMove, evtEnd;
if ('ontouchend' in window) {
    evtStart = 'touchstart';
    evtMove  = 'touchmove';
    evtEnd   = 'touchend';
} else {
    evtStart = 'mousedown';
    evtMove  = 'mousemove';
    evtEnd   = 'mouseup';
}

// BASIC DRAGGABLE INTERACTION
// No further configuration, just drags ....
var panel = document.querySelector('.testpanel');

panel.addEventListener(evtStart, function(e) {
    e.preventDefault();
    var styles = window.getComputedStyle(panel),
        left   = parseFloat(styles.left),       // css left on mousedown
        top    = parseFloat(styles.top),        // css top on mousedown
        psx    = e.pageX || e.touches[0].pageX, // pointer x on mousedown
        psy    = e.pageY || e.touches[0].pageY; // pointer y on mousedown

    // function actually draging the elmt
    var drag = function (e) {
        e.preventDefault();

        var pmx = e.pageX || e.touches[0].pageX,    // current pointer x while pointer moves
            pmy = e.pageY || e.touches[0].pageY;    // current pointer y while pointer moves

        panel.style.left = left + (pmx - psx) + 'px';   // set new css left of elmt
        panel.style.top  = top  + (pmy - psy) + 'px';   // set new css top of elmt

    };

    panel.addEventListener(evtMove, drag);

    panel.addEventListener(evtEnd, function () {
        panel.removeEventListener(evtMove, drag);
    });
});

Demo page

同样，它在桌面和移动设备上运行良好，除了适用于 Android 的 FF。

为什么它不适用于 Android 的 FF？它是我的代码中的东西还是 FF 中的错误？到目前为止，我找不到任何有用的东西。

如果有任何帮助，我将不胜感激。

Answer 1

终于我自己找到了：

只需将 pageX/pageY 与 clientX/clientY 交换，它也适用于 Android 的 FF。

我猜 FF for Android 的实现有些不同，根据 MDN，pageX/pageY 尚未最终确定。