web-dev-qa-db-ja.com

手動でタッチイベントをトリガーする

過去30分間検索しましたが、解決策が見つかりませんでした。

要素でtouchstartイベントをトリガーしたい。

これにより、touchstartイベントが発生します。

var e = document.createEvent('MouseEvent');

e.initMouseEvent("touchstart", true, true, window, 1, screenX, screenY, clientX, clientY,
    ctrlKey, altKey, shiftKey, metaKey, button, relatedTarget);

target.dispatchEvent(e);

変数は関数によって定義されることに注意してください

しかし、それには問題があります。 eventオブジェクトにはtouchesプロパティがありません。そのため、次のようなものは機能しません。

var touch = e.touches[0];

touchstartイベントを手動でトリガーする方法はありますか（Android> = 4.0およびChromeタッチを有効にした状態で動作する必要があります[DevTools] ）？

jQueryのようなフレームワークを使用したくないことに注意してください。jQueryを使用すると、要素にtoucheventを簡単に作成できます;）

javascripteventstouch
26
AndreM96

W3C による

_var e = document.createEvent('TouchEvent');
_

その後、また変更

_e.initMouseEvent();
_

に

_e.initTouchEvent();
_

touchstartイベントを作成したため。

W3Cリンクには次のように書かれています：

一部のユーザーエージェントは、TouchEventインターフェイスの一部としてinitTouchEventメソッドを実装します。このメソッドが使用可能な場合、スクリプトはこのメソッドを使用して、TouchListプロパティ（createTouchListから返された値で初期化可能）を含むTouchEventオブジェクトのプロパティを初期化できます。 initTouchEventメソッドはまだ標準化されていませんが、将来の仕様では何らかの形で登場する可能性があります。

そのため、e.initUIEvent('touchstart', true, true);に頼らなければならないかもしれません
さらに、公式仕様では、TouchListオブジェクトはoptionalであり、 createTouchListメソッド。そのリストにtouchを追加するには、すべての座標などを渡すcreateTouchメソッドを呼び出す必要があります。 ：

 6.1メソッド
 
＃createTouch 
指定された属性でTouchオブジェクトを作成します。
パラメーター|タイプ| Nullable |オプション|説明
ビュー| WindowProxy | ✘| ✘| 
 target | EventTarget | ✘| ✘| 
 identifier |長い| ✘| ✘| 
 pageX |長い| ✘| ✘| 
 pageY |長い| ✘| ✘| 
 screenX |長い| ✘| ✘| 
 screenY |長い| ✘| ✘| 
戻り値のタイプ：Touch 
 
＃createTouchList 
 0個以上のTouchオブジェクトで構成されるTouchListオブジェクトを作成します。引数なしでこのメソッドを呼び出すと、オブジェクトがなく、長さ0（ゼロ）のTouchListが作成されます。
 
 Parameter |タイプ| Nullable |オプション|説明
 touchs |タッチ| ✘| ✔| 
戻り値のタイプ：TouchList

それがうまくいかない場合は、これを試すことができます：

_var e = document.createEvent('UIEvent');
e.initUIEvent();
_

動作するはずです、それはcreateEvent('MouseEvent')よりも理にかなっています...
ただし、テストのために、chromeコンソールを開いて_Emulate touch events_を確認し、ユーザーエージェントをAndroidにオーバーライドしないでください4.（Ctrl + Shift + j>歯車をクリックします右下隅にある[上書き]を選択すると、必要な設定がすべて表示されます）

タッチイベントは長い道のりを歩んでいるので、まだ標準化されているという点で、touchesプロパティはnotRO（まだ？）、このクイックフィックスを使用できます（OPが検出し、目的の結果で使用します）。

_var e = document.createEvent('TouchEvent');
e.touches = [{pageX: pageX, pageY: pageY}];
_

これは、そうでない場合は信じられません（そうでなければ信じられません）。

_e.touches = e.createTouchList(
    e.createTouch(window, target, 0, pageX, pageY, screenX, screenY)
);
_
22
Elias Van Ootegem

私はこれが答えられたことを知っていますが、私もこの問題に対する答えを見つけるのに苦労しました、そして、受け入れられた答えは私のために働きませんでした。最終的に、私が見つけた解決策は非常にシンプルで、複数のブラウザーでサポートされています。

var e = new Event('touchstart');
target.dispatchEvent(e);

それでおしまい。簡単にできませんでした。

12
Derek Henderson

私はこのソリューション（javascriptネイティブ）を思いついた、私のために働く

var el = document.getElementById('myDivId');
// desktop
el.click();

// mobile
if (window.matchMedia("(max-width: 768px)").matches) {
        // createEvent(), event.initEvent() are Depricated see Ref: [enter link description here][1]
        // var event = document.createEvent("Event"); 
        // event.initEvent("touchstart", false, true);
        // event.initEvent("touchend", false, true);
        // So the solution is:
        var event1 = new Event('touchstart');
        var event2 = new Event('touchend'); 
        el.dispatchEvent(event1); 
        el.dispatchEvent(event2);
  }
1
Theva