试图让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的触摸事件是一个很好的计划（我可能是错的），我只是使用普通的网络服务器/本地文件进行开发。