2

Chrome 拡張機能からタッチ イベントをシミュレートしようとしています。タッチ対応ブラウザをシミュレートするために、デバイス モードで開発者ツールを使用しています。

ドキュメントのコンテキストでタッチ イベントをシミュレートするコードを実行すると (<top frame>開発者ツールのドロップダウン ボックスで選択)、正常に動作します。touchesただし、任意の拡張機能 (AdBlock など) のコンテキストで同じコードを実行すると、タッチ イベントはおよびプロパティなしでイベント ハンドラーに到達しchangedTouchesます (それらは ですundefined)。

これは Chrome の欠陥ですか、それとも何か不足していますか?

赤い領域に触れると、次の出力が得られます。

ガットリアルタッチイベント1

（1は触れている指の数です）。

タッチをシミュレートすると、次の出力が得られます。

シミュレートされたタッチ イベント 1 を取得しました

拡張機能のコンテキストで JavaScript を開発ツールにコピーすると

devtools 拡張コンテキスト 次の出力が得られます。

リアル タッチ イベントが null になりました

(本当は、キャプチャされた変数にアクセスできないためです。これはこの質問には関係ありません) 。simulated

編集:これが本当にバグである場合に備えて、クロム プロジェクトにバグ レポートを提出しました。

コードは次のとおりです。

       var count = 0;

       function log(msg) {
         var out = document.getElementById('output');
         out.innerHTML = ++count + ': ' + msg + '<br/>' + out.innerHTML;
       }

       var simulated = false;

       function message() {
         return 'Got ' + (simulated ? 'simulated' : 'real') + ' touch event ';
       }

       function fire() {
         simulated = true;
         var event = document.createEvent('Event');
         event.initEvent('touchstart', true, true);
         var element = document.getElementById('x');
         event.touches = createTouchList(createTouch(element, {
           x: 5,
           y: 5
         }, 42));
         element.dispatchEvent(event);
       }
       window.fire = fire;

       function createTouch(element, point, id) {
         if (document.createTouch)
           return document.createTouch(window, element, id, point.x, point.y, point.x, point.y);

         return {
           view: window,
           target: element,
           identifier: id || 0,
           pageX: point.x,
           pageY: point.y,
           clientX: point.x,
           clientY: point.y
         };
       }

       function createTouchList(touches) {
         if (document.createTouchList)
           return document.createTouchList(touches);

         if (Array.isArray(touches))
           return touches;

         return [touches];
       }

       log('listening');
       document.getElementById('x').addEventListener('touchstart', function(e) {
         log(message() + (e.touches ? e.touches.length : 'null'));
         simulated = false;
       }, true);
 <h1 id="x" style="height: 50px; background-color: red; text-align:center">Touch here</h1>
<h1 onclick="fire()" style="height: 30px; background-color: cyan; text-align:center">Simulate touch event</h1>
<h3 id="output"></h3>

4

0 に答える 0