iPhone/iPad觸摸事件Javascript LineChart

我想用Javascript中的可移動點使用Highcharts實現一個線圖。使用最新的Chrome瀏覽器，一切都按預期工作。但是，當我在iPhone或iPad上查看時，可移動點根本無法移動。iPhone/iPad觸摸事件Javascript LineChart

這是由於在移動Safari中處理鼠標事件的原因。

mousedown變得touchstart，mousemove變得touchmove等

我想所有的touchevents映射到相應的移動等價的，但沒有成功。這些點可以拖動，但視圖不更新......

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

移動Safari瀏覽器版本：http://jsfiddle.net/MTyzv/7/

UPDATE

好吧，我將問題範圍縮小下來有點... 看起來好像所有的觸摸事件都是正確處理的，但是一旦它們移動，點就會跳到0.0。除此之外，圖形在初始觸摸後不會「重繪」。查看小提琴的更新版本http://jsfiddle.net/MTyzv/11/

來源

2012-05-25 alex

對於每個開始使用觸摸事件的人來說，這是一個常見問題。

TouchEvent支持多點觸控，所以沒有像event.pageX這樣的東西。的TouchEvent包含三個「TouchLists」，它的：

event.touches
event.targetToches
event.changedTouches

最後這些清單上，你可以得到一個觸摸pageX屬性，pageY等。如果你不在乎多點觸摸有一個常見的簡化，你可以打電話給event.targetTouches [0] .pageX

我更新你的演示在這裏：http://jsfiddle.net/7UsbM/7/現在它在兩個工作，t啓用觸摸的設備和桌面瀏覽器。

不要忘了看看MDN參考：https://developer.mozilla.org/en/DOM/Touch_events

希望它能幫助。

來源

2012-05-27 10:36:41 slawekkolodziej

非常感謝，不敢相信我錯過了。 – alex

小心！根據這個最近的錯誤https://code.google.com/p/chromium/issues/detail?id=179711 Chrome不會在窗口中傳遞關鍵的ontouchstart測試'var hasTouch ='ontouchstart'，聲稱該事件存在，禁用鼠標拖動。讓我難住了一段時間... –

我不認爲這是一個錯誤。觸摸屏的臺式電腦越來越多。這就是爲什麼桌面瀏覽器也支持觸摸事件的原因。但是，請記住，當您檢測到觸摸事件時，您不應忽視鼠標事件！ – slawekkolodziej

有沒有像拖動手機這樣的事情，但你需要使用觸摸事件來工作。通常你需要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-27 10:38:45

iPhone/iPad觸摸事件Javascript LineChart

回答

相關問題