使用mutl-touch的Webkit iphone/ipad问题

Question

在UIWebView(启用多点触控)中,我得到了一个包含两个div(div1和div2)的页面,每个div都注册了touchstart和touchend事件.每次他们接收触摸事件时,我都会倾倒以下内容:

• event.touches:包含所有当前触摸
• event.targetTouches:包含与给定目标相关的触摸
• event.changedTouches:包含触发事件的触摸

请考虑以下情形:

• 点击div1:event.touches包含div1
• 不释放div1,点击div2:event.touches包含div1和div2
• 释放div2但不是div1:event.touches是空的,它不应该因为div1仍被按下.div1也收到了一个touchend事件,好像它已被释放一样
• 等一会儿,仍然按下div1,它会收到一个新的touchstart事件,因为它从未被释放过没有意义.

因此,基本上当释放一根手指时,它的作用就像两根手指一样被移除 我错过了什么吗？

Answer 1

是的，我也发现了这个。听起来这应该是一个错误，但我不确定。

我发现在 iOs webkit 中实现各种多点触摸功能的最灵活的方法是捕获整个文档上的触摸事件，即调用document.addEventListener()您感兴趣的所有类型的触摸事件。

然后使用某种策略来找出触摸发生在哪个元素上。你可以：

• 检查触摸的target属性以获取有关该元素的一些信息。然而（另一个可能的错误？），你无法从此属性中找到元素的 ID，只能找到它的类，这对于区分使用同一类的多个元素没有好处。检查这个 JS 虚拟光表的来源，以了解其实际情况。

• 将触摸pageX和pageY坐标与触摸可能涉及的每个元素（相对于文档）的尺寸和位置进行比较。例如，使用 jQuery：

  var x = touch.pageX;
  var y = touch.pageY;
  var offset=$(element).offset();
  if (x >= offset.left && y >= offset.top && x < (offset.left + $(element).width()) && y < (offset.top + $(element).height())) 
  {
      // element was touched!
  }
  

使用这种方法，所有触摸操作的行为都完全符合您的预期:)