javascript - iPhone/iPad 触摸事件 Javascript LineChart

Question

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

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

mousedown 变为 touchstart，mousemove 变为 touchmove 等

我尝试将所有 touchevent 映射到相应的移动设备，但收效甚微。可以拖动点，但 View 不会更新...

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

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

更新

好吧，我把问题缩小了一点…… 似乎所有的触摸事件都被正确处理了，但是点一移动就跳到 0.0。除此之外，图形在初始触摸后不会“重新绘制”。 查看此 Fiddle 的更新版本 http://jsfiddle.net/MTyzv/11/

Answer 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

希望对您有所帮助。