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

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);
});
});

演示页面

同样，它在台式机和手机上运行良好，除了安卓版的FF。

为什么它不能在安卓的FF上工作？这是我的代码中的某个东西，还是FF中的一个错误？到目前为止，我找不到任何有用的东西。

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

Answer 1

最后我自己找到了：

只需将pageX/pageY与

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