Question

我正在尝试使用Javascript在SVG元素上实现拖动/移动操作。我正在使用诸如此类的事件处理程序：

function handleMouseDown(evt) {
            currentX = evt.offsetX;
            currentY = evt.offsetY;
            dX = currentX - Number($(evt.srcElement).attr("x"));
            dY = currentY - Number($(evt.srcElement).attr("y"));
            isDragging = true;
            $info.html("mousedown at " + currentX + ", " + currentY); //feedback for debugging
        }

请注意，我已经有代码将mousedown或touchstart指向handleMouseDown，具体取决于它是否为触控设备。

在我的桌面上，代码在IE9，Google和Safari上运行良好。然而，在iPad上，在touchstart上，反馈显示＆＃34; mousedown at undefined，undefined。＆＃34;如果我用.pageX和.pageY替换.offsetX和.offsetY，那么我得到实际坐标。因此，似乎Safari Mobile不会处理.offsetX和.offsetY，但它确实处理.pageX和.pageY。

我知道我可以使用源元素position.left属性从pageX计算.offsetX，但我想尽可能避免这种情况。我的问题是：我的代码或方法是否有问题，或者在Safari Mobile中没有处理.offsetX。

任何帮助都非常感谢！

Answer 1

您可以改为使用clientX和clientY。

Answer 2

在.on元素上使用jQuery的canvas函数绑定事件处理程序时遇到类似的问题（不知道原因）。

我通过使用addEventListener绑定事件处理程序来解决它。处理程序中的event对象具有使用适当值定义的offsetX和offsetY。

希望它有所帮助...

evt.offsetX在Safari上返回undefined

2 个答案: