Question

我正在尝试确定用户是否在iPhone网络应用的移动版Safari中进行了touchupinside。到目前为止，我一直没有成功。 touchend事件触发，无论触摸事件发生在屏幕上的哪个位置，我似乎无法辨别目标在事件参数中的任何变化。

有人能指出我如何使用javascript捕获touchendinside（与touchendoutside）事件的正确方向吗？

$('a.arrow').bind('touchend',function(e) {
        console.log($(e.srcElement)); //both of these always return the same element
        console.log($(e.toElement)); //both of these always return the same element
    });

Answer 1

我发现Google发布了an article，说明了如何检测内部与外部之间的关系。基本诀窍是：

有3个处理程序：一个在touchstart，touchmove和touchend上。
1. touchstart：保存触摸的（x，y）坐标
2. touchmove：检查触摸是否在任一轴上移动了一定数量的像素，如果是，则停止跟踪触摸。
3. touchend：如果你还在跟踪它，它就是“在里面”;如果没有，那就是“外面”。

通过使用实际目标的界限等，您总是可以变得更复杂，但对于大多数可能足够的应用程序而言。

Answer 2

@Chris R. Donnelly是现货。您需要结合使用三个js事件（touchstart，touchmove和touchend）来有效地构建自己的手势识别器。

Google approach可能是一个非常好的方法。我还没有尝试过。

以下是Mobile Safari的“touch up inside”监听器的基本示例，该监听器仅侦听目标元素上的js事件。它将忽略任何源自元素外部的触摸，任何在元素外部结束的触摸，以及在元素内拖动的任何触摸。这不处理点击（如果你也支持桌面，你应该添加）。

<script type="text/javascript">
  document.getElementById("yourElementId").addEventListener('touchstart', touchstart, false);
  document.getElementById("yourElementId").addEventListener('touchmove', touchmove, false);
  document.getElementById("yourElementId").addEventListener('touchend', touchend, false);
  var touchStartCoord = null;
  function touchstart (e) {
    touchStartCoord = {x: e.touches[0].pageX, y: e.touches[0].pageY};
    return true;
  };
  function touchmove (e) {
    if (touchStartCoord != null)
    {
      var tolerance = 10.0;
      if (Math.abs(e.touches[0].pageX-touchStartCoord.x) > tolerance || Math.abs(e.touches[0].pageY-touchStartCoord.y) > tolerance)
      {
        // moved too far, cancels event for this touch
        touchStartCoord = null;
      }
    }
    return true;
  };
  function touchend (e) {
    if (touchStartCoord != null)
    {
      window.location.href = "http://geospike.com/";
      return true;
    }
  };
</script>

如果您想支持多个元素，可以以可重用的方式将其包装起来。

在Mobile Safari中有没有办法使用TouchEndInside？

2 个答案: