23

タッチエンドイベントが呼び出されたときに、どのhtml要素が指の下にあったかを見つける必要があります。私が使用しているコード。

$('.wsSquare').on("mouseup touchend",function(event){
    event.preventDefault();
    event.stopPropagation();
    console.log($(event.target).data());    
});

このコードは、（非タッチ）デバイスでマウスを使用して、mouseupイベント時にマウスの下の要素に関連付けられたデータを正しくログに記録します。

ただし、タッチデバイス（ipad safari）では、event.targetは、タッチスタートイベント中に指の下にあった要素であり、タッチスタートイベントの下の要素のデータをログに記録します。

touchmoveイベントの動作も調べましたが、これも同じ動作です（event.targetはtouchstart要素です）。すべてのタッチイベントのターゲットは、ジェスチャの開始時にタッチされた要素のようです。

タッチエンドイベントが呼び出されたときに、指の下の要素にアクセスする必要があります。私のジェスチャーは潜在的に多くの要素を横断します。

編集

さらなる研究により、これは仕様から掘り下げられました。

5.5タッチエンドイベント

ユーザーエージェントは、このイベントタイプをディスパッチして、ユーザーがタッチサーフェスからタッチポイントを削除したことを示す必要があります。これには、画面からドラッグされた場合など、タッチポイントがタッチサーフェスから物理的に離れる場合も含まれます。

このイベントのターゲットは、タッチポイントがターゲット要素のインタラクティブ領域の外に移動した場合でも、タッチポイントが最初にサーフェスに配置されたときに開始した要素と同じである必要があります。

削除された1つまたは複数のタッチポイントは、TouchEventのchangedTouches属性に含まれている必要があり、touchesおよびtargetTouches属性に含まれていてはなりません。

観察された動作は正しいのですが、どうすればこの動作を変更できますか？

4

1 に答える 1

32

document.elementFromPointたとえば、次のように、イベントからの座標を使用してフィードします。

$('.wsSquare').on("mouseup touchend",function(event){
    event.preventDefault();
    event.stopPropagation();
    var changedTouch = event.changedTouches[0];
    var elem = document.elementFromPoint(changedTouch.clientX, changedTouch.clientY);
    // Do something with elem
});
于 2012-07-17T13:26:35.407 に答える