0

次のような 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の色を作成する JavaScript を作成するにはどうすればよいですか?background#x#y#zxyz

できます

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

これは色を変更しますがauto、指がdiv.t.

（私は知ってtouchendいますが、指が持ち上げられるとすぐにではなく、指が長方形を離れるとすぐにデフォルトの色に戻したいです。）

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
  }


});

上記の例では、関数の 3 つの引数は、タッチの x 座標、タッチの y 座標、およびタッチされた要素e.targetです。「衝突」機能の基本的な考え方を理解するために、要素の実際の位置、幅、高さをelement.getBoundingClientRect()(詳細) で決定できます。

これを見てください: touch events。

それが役立つことを願っています。

于 2013-06-02T06:02:51.213 に答える