我正在尝试使用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、谷歌和Safari上运行良好。然而,在iPad上,在触摸启动时,反馈显示"mousedown at undefined,undefined."。如果我用.pageX和.pageY替换.offsetX和.offsetY,那么我会得到实际坐标。所以Safari Mobile似乎不处理.offsetX和.offsetY,但它处理.pageX和.pageY.
我知道我可以使用源元素position.left属性从pageX计算.offsetX,但如果可能的话,我希望避免这种情况。所以我的问题是:我的代码或方法是否有问题,或者Safari Mobile中是否未处理.offsetX。
非常感谢您的帮助!
您可以使用clientX
和clientY
。
在canvas
元素上使用jQuery的.on
函数绑定事件处理程序时遇到类似问题(不知道原因)。
我通过使用addEventListener
绑定事件处理程序来解决此问题。处理程序中的event
对象具有用正确值定义的offsetX和offsetY。
希望它能帮助。。。