确定触摸手势何时离开目标元素答案

【问题标题】：Determine when touch gesture leaves target element确定触摸手势何时离开目标元素
【发布时间】：2013-06-02 02:50:28
【问题描述】：

我有一些看起来像这样的 HTML：

<div style="width: 50px; height: 50px; background: #f00" class="t"></div>
<div style="width: 50px; height: 50px; background: #0f0" class="t"></div>
<div style="width: 50px; height: 50px; background: #00f" class="t"></div>
<div style="width: 50px; height: 10px;" id="indicator"></div>

我如何编写 JavaScript 来使#indicator 的background 着色，无论#x、#y 或#z 的背景是什么，同时手指正在触摸x、@ 周围的矩形987654328@, 和z?

我可以的

$(".t").on('touchstart', function() {
  $("#indicator").css('background', $(this).css('backgroundColor'));
});

它确实改变了颜色，但是一旦手指离开div.t 的约束，就无法弄清楚如何将颜色转回auto。

（我知道touchend，但我希望它在手指离开矩形后立即恢复为默认颜色，而不是在手指被拿起后立即恢复。）

【问题讨论】：

标签： javascript ios html touch

【解决方案1】：

您可以尝试使用touchmove 事件。

$(".t").on('touchmove', function(e) {
  var tx=e.targetTouches[0].pageX,
      ty=e.targetTouches[0].pageY;

  if(!SOME_FUNCTION_TO_CHECK_IF_THE_TOUCH_IS_IN_THE_ELEMENT(x,y,e.target)){
    //Remove the color
  }


});

在上面的例子中，函数的三个参数是触摸的 x 坐标、触摸的 y 坐标和被触摸的元素e.target。为了让您了解“碰撞”功能的基本概念，您可以使用element.getBoundingClientRect()(More info) 确定元素的实际位置、宽度和高度。

看看这个：touch events。

希望对你有帮助。

【讨论】：