試圖讓CSS3聚光燈效果與觸摸事件的工作

Question

我試圖讓這個效果在iPad觸摸事件的工作，這裏是它應該是什麼樣子上的jsfiddle http://jsfiddle.net/FwsV4/1/

鼠標事件，這是我試過http://jsfiddle.net/FwsV4/3/這不適合我。

說實話我有點失落，觸摸事件以及如何將鼠標點擊/移動到他們。實際上我不確定如何最好地利用這種效果，但我想要使用觸摸開始/結束事件來保持交互下面的元素。

任何人都可以指向正確的方向嗎？

Answer 1

你的第一個問題是你需要綁定touchstart來防止頁面滾動。你可以這樣做：

$('myElement').htmlElement.bind("touchstart", function(event) { 
    event.preventDefault(); 
    } 
); 

這可能是更好的從這個得到的合作社雖然。

這裏是觸摸事件一個很好的教程： http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

你的第二個問題是元素設置爲5000px的高度和寬度，因爲默認情況下，iOS將放大到包括整個頁面。您應該調整此操作或使用視口標記更改縮放行爲（請參閱viewport apple docs）。

以下代碼也是不正確的，並返回一個布爾值，而不是其中一個對象。

var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; 

這應該是：

var touch = e.originalEvent.touches[0] ? e.originalEvent.touches[0] : e.originalEvent.changedTouches[0]; 

但與touchmove你感興趣e.originalEvent.touches [0]（假定只有一個手指觸摸事件的利息）。

您還應該避免使用內聯js並以這種方式分離文件js（在某些情況下有可能會這樣做）。這使得難以遵循。

我不確定在jfiddle中使用touch事件是一個很棒的計劃（我可能是錯的），我只是使用一個普通的web服務器/本地文件來開發。