0

I have some HTML that looks something like this:

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

How can I write JavaScript that will make #indicator's background color whatever the background of #x, #y, or #z is while a finger is touching the rectangle around x, y, and z?

I can do 

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

which does change the color, but can't figure out how to turn the color back to auto once the finger has left the constrains of the div.t.

(I know about touchend, but I want it to revert to the default color as soon as the finger has left the rectangle, not as soon as the finger is picked up.)

4

1 回答 1

0

您可以尝试使用该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()为了让您了解“碰撞”功能的基本概念，您可以使用(更多信息)确定元素的实际位置、宽度和高度。

看看这个：触摸事件。

我希望这会有所帮助。

于 2013-06-02T06:02:51.213 回答