1

我正在尝试使用Highcharts在 Javascript 中实现带有可移动点的折线图。使用最新的 Chrome 一切都按预期工作。但是，当我在 iPhone 或 iPad 上查看时，可移动点根本不会移动。

这是因为在移动 Safari 中鼠标事件的处理方式不同。

mousedown变成touchstart，mousemove变成touchmove，等等。

我试图将所有触摸事件映射到相应的移动设备，但没有取得多大成功。点可以拖动，但是视图没有更新……

Chrome 工作版本：http: //jsfiddle.net/MTyzv/3/

移动版 Safari 版：http: //jsfiddle.net/MTyzv/7/

更新

好的，我将问题缩小了一点......似乎所有触摸事件都得到了正确处理，但是点一旦移动就会跳转到 0.0。除此之外，在初次触摸后，图形不会“重绘”。请参阅此 Fiddle http://jsfiddle.net/MTyzv/11/的更新版本

4

2 回答 2

3

对于开始使用触摸事件的每个人来说，这是一个常见的问题。

TouchEvent 支持多点触控，所以没有event.pageX. TouchEvent 包含三个“TouchLists”，它的：

  • 事件.touches
  • 事件.targetToches
  • event.changedTouches

最后在这些列表中，您可以获得 Touch pageX、pageY 等。如果您不关心多点触控，有一个常见的简化，您可以调用 event.targetTouches[0].pageX

我在这里更新了您的演示：http: //jsfiddle.net/7UsbM/7/现在它可以在支持触摸的设备和桌面浏览器中使用。

不要忘记查看 MDN 参考：https ://developer.mozilla.org/en/DOM/Touch_events

希望能帮助到你。

于 2012-05-27T10:36:41.743 回答
1

没有像移动设备拖动这样的东西，但你需要使用触摸事件来完成这项工作。通常您需要 x,y 坐标来制作逻辑，因此请制作适用于鼠标/触摸的 x,y 位置的函数/类，而不是简单地添加事件并获取触摸 x,y 或单击 x,y 并调用这些函数。

$('div').bind('mousedown' , function(e)
{
   // get x,y code
   var y = e.pageY;
   var x = e.pageX;

   // pass to function down(x,y);
   down(x,y);
});


$('div').bind('touchstart' , function(e)
{
   // get x,y code
   var touch = e.touches[0];
   var y = touch.pageY;
   var x = touch.pageX;

   // pass to function down(x,y);
   down(x,y);
});

function down(x,y)
{
   // do something with x,y
}
于 2012-05-27T10:38:45.610 回答