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

Question

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

Android 版 Firefox 显示以下行为:

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

代码:

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。

我猜 Android 的 FF 中的实现有些不同，根据 MDN，pageX/pageY 还没有最终确定的标准。