Question

I am trying to implement a linegraph with movable points in Javascript using Highcharts. Using latest Chrome everything just works as expected. However, when I look at it on my iPhone or iPad, the movable points wouldn t move at all.

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

mousedown 成为 touchstart , mousemove 成为 touchmove 等。

我试图绘制所有触摸活动图, 以达到适当的移动等效, 但没有多少成功。点可以拖动, 但视图没有更新...

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

移动搜索版本:“http://jsfiddle.net/MTyzv/7”, rel=“nofollow”>http://jsfiddle.net/MTyzv/7/

<强> UPDATE

Ok I narrowed the problem down a bit... It seems like all the touch events are handled correctly, but the points jump to 0.0 as soon as they are moved. In addition to that, the graph is not "redrawn" after the initial touch. See the updated version of this Fiddle http://jsfiddle.net/MTyzv/11/

Answer 1

对于开始与触摸事件合作的每一个人来说,这是一个常见问题。

TouchEvent 支持多触摸, 所以没有像 event. pageX 这样的东西。 TouchEvent 包含三个“ 触摸列表 ”, 包括 :

event.touches
event.targetToches
event.changedTouches

最后,在这些列表上,您可以得到一个触摸页面X,pageY等。如果您不关心多触多触多触,那么您可以调用事件。targetTouches[0].pageX。

我更新了你的演示文稿:http://jsfiddle.net/7UsbM/7, ,现在它同时在触摸设备和桌面浏览器中起作用。

不要忘了看MDN参考文献:https://developer.mozilla.org/en/DOM/Touch_events

希望能帮上忙

Answer 2

There is no such thing like drag for mobile, but you need to use touch events to this working. Usually you need x,y co-ordinates to make logic, so make functions/classes that work on x,y position of mouse/ touch, than simply add events and get touch x,y or click x,y and call these functions.

$( 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
}

友情链接