26

一連の要素の上で指をドラッグすると、指を置いた要素の背景が変化するようにしたいと思います。

これには touchmove イベントを使用したいようですが、私が知る限り、ドラッグしてもターゲット要素は決して変化しません。clientX と clientY は変更されます。このdocument.elementFromPoint関数は chrome で動作することがわかりましたが、非常に回りくどいようです (さらに、どのブラウザーがそれをサポートしているかはわかりません)。

このフィドルを参照してください。ボックスに触れると、ボックスが緑色に変わります。

http://jsfiddle.net/QcQYa/9/

ちなみに、Chrome では、インスペクター設定モーダルのユーザー エージェント タブに移動し、「タッチ イベントのエミュレート」を選択して、私の例を表示する必要があります。

編集:mouseenterここで 使用するアイデアを見つけましたタッチムーブでhtml要素を検出する方法そしてそれをデスクトップクロムで動作させましたが、モバイルサファリでは動作させませんでした。

4

3 に答える 3

25

私は別のアプローチを取りました：

タッチイベントごとに、タッチ位置が$('.catch')オブジェクト内にあるかどうかを確認します。

function highlightHoveredObject(x, y) {
    $('.catch').each(function() {
      // check if is inside boundaries
      if (!(
          x <= $(this).offset().left || x >= $(this).offset().left + $(this).outerWidth() ||
          y <= $(this).offset().top  || y >= $(this).offset().top + $(this).outerHeight()
      )) {

        $('.catch').removeClass('green');
        $(this).addClass('green');
      }
    });
}

jsFiddleで動作していることがわかります。
Chrome で動作しますが、モバイル デバイスでも動作することを願っています。

編集：
このフィドルでは、私とコメントのリンクからの両方のバージョンを使用しました（document.elementFromPoint - jQueryソリューション）、両方とも私のAndroidフォンで動作するようです。また、迅速で汚いベンチマークも追加しました (コンソールを参照)。予想どおりdocument.elementFromPoint、数千分の 1 高速です。それが懸念される場合は、サポートしdocument.elementFromPointたいブラウザーのサポートを確認する必要があります。

于 2012-09-12T22:34:03.373 に答える
2

このフィドルで私の解決策を見つけることができます.Androidフォンでテストしましたが、正常に動作します.jquerymobileを使用してvmousemoveイベントを利用します.また、イベントにハンドラーをアタッチtouchmoveして、モバイルデバイスでブラウザビューをスクロールしないようにします.

関連する HTML と JavaScript のビットをここに貼り付けます。

<div id="main" ontouchmove="touchMove(event);">
   <span class='catch'>One</span>
   <span class='catch'>Two</span>
   <span class='catch'>Three</span>
   <span class='catch'>Four</span>
   <span class='catch'>Five</span>
   <span class='catch'>Six</span>
   <span class='catch'>Seven</span>
</div>

今JavaScript：

function elem_overlap(jqo, left, top) {
   var d = jqo.offset();
   return top >= d.top && left >= d.left && left <= (d.left+jqo[0].offsetWidth)
          && top <= (d.top+jqo[0].offsetHeight);
}

/* To prevent WebView from scrolling on swipe, see http://goo.gl/DIZbm */
touchMove = function(event) {
   event.preventDefault(); //Prevent scrolling on this element
}

$("#main").bind("vmousemove", function(evt){
   $('.catch').each(function(index) {
      if ( elem_overlap($(this), evt.pageX, evt.pageY) ) {
         $('.catch').not('eq('+index+')').removeClass('green');
         if (!$(this).hasClass('green')) {
            $(this).addClass('green');
         }
      }
   });
});
于 2012-09-13T12:08:35.563 に答える
1

「タッチエンドイベントをトリガー」したり、別のイベントへのタッチを開始する必要があるタッチをキャンセルしたりすることはできません。

したがって、touchmoveイベントをコンテナにバインドし、Dan Leeの回答の一部のように、ボックスの位置/サイズとタッチ位置に基づいてボックスを操作することをお勧めします。

于 2012-09-12T23:15:22.470 に答える