页面滚动

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。

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