iPhone / iPad觸摸事件Javascript LineChart

Question

我正在嘗試使用Highcharts在Javascript中實現帶有可移動點的線圖。 使用最新的Chrome，一切都按預期工作。 但是，當我在iPhone或iPad上查看它時，可移動點根本不會移動。

這是因為鼠標事件在移動Safari中的處理方式不同。

mousedown成為touchstart ， mousemove成為touchmove等。

我試圖將所有的觸摸屏映射到適當的移動設備，但沒有太大的成功。 可以拖動點，但視圖不會更新...

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

移動Safari版： http ： //jsfiddle.net/MTyzv/7/

UPDATE

好吧我把問題縮小了一點......似乎所有的觸摸事件都被正確處理了，但是一旦移動它們就會跳到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

希望能幫助到你。

Answer 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
}