Question

我有一些看起来像这样的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>

如果手指#indicator，background或#x的背景为什么，我怎么能编写使#y的{{1}}颜色变为#z颜色的JavaScript正在触及x，y和z周围的矩形？

我能做到

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

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

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

Answer 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。

我希望有所帮助。

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

1 个答案: