iPhone/iPad 触摸事件 Javascript LineChart答案

【问题标题】：iPhone/iPad touch events Javascript LineChartiPhone/iPad 触摸事件 Javascript LineChart
【发布时间】：2012-05-27 18:38:45
【问题描述】：

我正在尝试使用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/

【问题讨论】：

标签： javascript iphone touch mobile-safari highcharts

【解决方案1】：

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

TouchEvent 支持多点触控，所以没有像event.pageX 这样的东西。 TouchEvent 包含三个“TouchLists”，其：

event.touches
event.targetToches
event.changedTouches

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

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

别忘了看看 MDN 参考：https://developer.mozilla.org/en/DOM/Touch_events

希望对你有帮助。

【讨论】：

小心！根据这个最近的错误code.google.com/p/chromium/issues/detail?id=179711 Chrome 不会通过关键的 ontouchstart 测试var hasTouch = 'ontouchstart' in window，声称该事件存在，禁用鼠标拖动。让我难过了一阵子……
我不认为这是一个错误。带有触摸屏的台式电脑越来越多。这就是桌面浏览器也支持触摸事件的原因。但是，请记住，当您检测到触摸事件时，您不应该忽略鼠标事件！

【解决方案2】：

没有像移动设备拖动这样的东西，但您需要使用触摸事件来完成这项工作。通常您需要 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
}

【讨论】：