javascript - 试图让 CSS3 聚光灯效果与触摸事件一起使用

Question

我试图让这种效果与 ipad 上的触摸事件一起工作，这是 jsfiddle http://jsfiddle.net/FwsV4/1/上的鼠标事件应该是什么样子

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

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

谁能指出我正确的方向？

score 1 · Accepted Answer

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

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

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

您的第二个问题是将元素设置为 5000 像素的高度和宽度，因为默认情况下 iOS 将缩放以包含整个页面。您应该对此进行调整或使用 viewport 标签来更改缩放行为（请参阅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 一起使用是否是一个不错的计划（我可能错了），我只是使用普通的网络服务器/本地文件进行开发。

1 回答 1