试图让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服务器/本地文件来开发。