javascript - 尝试使用触摸事件获得 CSS3 聚光灯效果

Question

我正在尝试使这种效果与 ipad 上的触摸事件一起使用，这是 jsfiddle 上的鼠标事件应该看起来的样子 http://jsfiddle.net/FwsV4/1/

这是我试过的http://jsfiddle.net/FwsV4/3/这对我不起作用。

老实说，我对触摸事件以及如何将鼠标点击/移动转化为触摸事件有点迷茫。我实际上不确定如何最好地利用这种效果，但我想使用触摸开始/结束事件保持下面的元素交互。

谁能指出我正确的方向？

Answer 1

您的第一个问题是您需要绑定(bind)到 touchstart 以防止页面滚动。你可以这样做:

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

不过，从中获取坐标可能更好。

这是关于触摸事件的一个很好的教程: http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

您的第二个问题是将元素设置为 5000 像素的高度和宽度，因为默认情况下 iOS 会缩放以包括整个页面。你应该调整这个或者使用视口(viewport)标签来改变缩放行为(参见 viewport apple docs )。

下面的代码也是不正确的，返回的是一个 bool 值，不是其中一个对象。

  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 中使用触摸事件是否是一个好计划(我可能是错的)，我只是使用普通的网络服务器/本地文件来开发。