25

Chrome for Android バージョン 16 および 18 (少なくとも) には、誤って報告されるバグがありclientXますclientY。ページがスクロールされると、イベントではなく、clientX/Y少なくともイベントの値が正しくなくなります。ここにバグがあります：touchstartclick

https://code.google.com/p/chromium/issues/detail?id=117754

これには、自分で試すことができるこの例が含まれています: http://www.apprisant.com/tab/cd.html

ここでキャンバスを使用して同様の例を作成しました: http://codepen.io/simonsarris/full/dJcvn

これらの例は他のモバイル ブラウザー (プレーンな古い Android ブラウザーを含む) でも動作しますが、Chrome for Android ではスクロール時の (少なくとも一部の) タッチ イベントで clientX/Y が壊れているようです。

興味深いことに、 clientX と clientY は、 on のclickようにイベントで中断されませんtouchstart。

私の質問は、clientX と clientY をブラウザー間で一貫して動作させるための最善の回避策は何ですか? window.scrollXとをオフセットすることでwindow.scrollY問題が「解決」されるようですが、適切な回避策として次のことを行う必要があります。

  1. できればユーザーに何もさせず、userAgent のチェックに頼ることなく (したがって、特定のブラウザー バージョンを仮定しないで)、ブラウザーが影響を受けているかどうかを判断します。つまり、との値が不適切なブラウザをどのように判断すればよいのでしょうか。clientXclientY
  2. 問題を確実に解決し、解決が必要なブラウザーでのみ解決します (おそらく、Chrome for Android とその特定のバージョンのみ。将来のバージョンでも問題ない可能性があります) window.scrollX/Y。
4

3 に答える 3

14

（または、それに応じて）e.pageY - window.scrollYの代わりに使用するだけです。e.clientYX

e.pageYイベントが発生した場所を示し、window.scrollYスクロールにより画面外にある「空白を削除」することでオフセットします。あなたはそれを条件付きでチェックすることe.pageY - window.scrollY === e.clientYができますが、回避策は正しい値を与え、とにかくそれをチェックするためにそれを計算しなければならないので、それは直感に反するでしょう.

于 2012-12-07T15:23:31.890 に答える
3

私はそれを確認することから始めます

<meta name="viewport" content="width=device-width, initial-scale=1">

使用されている。これにより、モバイル ブラウザ アプリケーション、特に Android の位置に関する多くの問題が修正されました。特定の問題に役立つかどうかはわかりませんが、試してみる価値はあります。

于 2012-12-07T15:13:39.953 に答える
0

touchstartキャンバス上のイベントをサブスクライブし、.offset()とを使用しe.pageXてキャンバス内の位置を取得できます。

$('#my-canvas').on('touchstart', function (startEvent) {
    var offset = $(this).offset();

    $(this).on('touchmove', function (moveEvent) {
        var pos = {
            x: moveEvent.pageX - offset.left,
            y: moveEvent.pageY - offset.top
        }
    });
});
于 2012-12-13T07:34:27.200 に答える