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

我正试图将这种效果应用于ipad上的触摸事件，下面是JSFIDLE上鼠标事件的效果

这是我尝试过的，但对我不起作用

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

---

有人能告诉我正确的方向吗？

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

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

不过，从中获得合作伙伴可能更好

以下是有关触摸事件的良好教程：

第二个问题是将元素的高度和宽度设置为5000px，因为默认情况下iOS将缩放以包含整个页面。您应该对此进行调整或使用视口标记更改缩放行为（请参见）

以下代码也不正确，返回的是一个布尔值，而不是一个对象

  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.touchs[0]感兴趣（假设只对单指触摸事件感兴趣）

您还应该避免以这种方式使用内联js和单独的文件js（在某些情况下可能有这样做的原因）。这使它更难跟随

---

我也不确定将touch events与jfiddle一起使用是否是一个很好的计划（我可能错了），我会使用一个普通的Web服务器/本地文件进行开发。

感谢所有这些，很抱歉，我应该说JSFIDLE链接只是一个草率的示例，目的是在这里获得帮助。我现在要考虑一下你的建议。