【jQuery】IEだとタッチイベントが効かない!?そんなときの対処法

先日更新したこの記事でjQueryを書き換えたとお伝えしました。
その延長で今回新た事象が発生しました。

Surface で IE を使用するとタッチでメニューが開かない

 

当初、jQueryを発動させるトリガーとして「click」「touch」を設けていました。
ですが、Consoleで確認したところ、IEでメニューを開くときにタッチしてもいずれのトリガーも発動せず・・・。
メニューを開いた際の動きも変な動きになってしまい・・・。

 

調べたところ、どうやらIE10以上で対応するようになった「タッチイベント」ですが、正確にはIEにおいては「ポインターイベント」というらしく、chromeや他のタッチデバイス(スマホなど)で対応している「タッチイベント」には対応していないとのこと。

 

そのため、jQueryのイベント発生のトリガーには「onpointer」を使用しないと動作しません。

 

ポインター イベントは、マウス、ペン、タッチスクリーンなどのデバイスからの、ハードウェアを区別しないポインター入力を処理するイベントおよび関連インターフェイスです。Internet Explorer 10 での導入以来、ポインター イベントは、他のブラウザー ベンダーや Web 標準コミュニティからのフィードバックや支援により、World Wide Web コンソーシアム (W3C) 仕様になりました。 ポインターイベントの更新

 

ちなみにですが、少し前までは、MSベンダープレフィックスをつけないとだめだったようですが、今の仕様ではつけないで動作します。

Internet Explorer 10 がリリースされた時点では、W3C のポインター イベント仕様は完成していなかったため、ポインター イベントの実装にベンダー プレフィックスが使われていました。 その後、この仕様は勧告候補の段階に達したため、MS ベンダー プレフィックス バージョンの API は推奨されなくなり、仕様で定義されたプレフィックスの付かないシグニチャが使われるようになりました。IE11 の時点で、Microsoft プレフィックス付きバージョンのポインター イベント API はサポートされなくなっており、Microsoft Edge の EdgeHTML からは完全に削除されています。MS ベンダー プレフィックスの削除

 

しかし、pointerdownの場合、firefoxではイベントを拾わないので、「mousedown」と「touchstart」を使用するのが今回の仕様を全て満たしていました。

土壇場になって、firefoxでは「pointerdown」が効かないことを知り、焦りました・・・。

 

今回の解決策

今回の解決策は、jQuery発動前の判定を

最初はclick or touchstart だったのを、このようにmousedownなのか、touchstartなのかの判定に変えました。

mousedownはどのブラウザにもDocumentとして入っているようなので、chrome、Edge、Safari、iPhone、IE、firefoxでは問題なく動作しました。

また、こうすることによって、タッチデバイスでIEを使用したときも問題なく動作するようになりました。

(本当によかったぁ〜〜〜!!!)

 

 

まとめ

心のなかでIEぃぃぃぃぃってなりながら、エンドユーザーのため対応しました。
でも実際今回バグという形でSurfaceでjQueryが正しく動作しませんよと教えてもらわなければ、タッチデバイスでIEを使用した際のjQueryの挙動についてわからなかったので、またひとつ勉強になりました。
WEB制作を行っていく上で、フロントもバックエンドもユーザーがどのデバイスを使用して、どのブラウザを使用して、なんてわかるわけではないし、各々使いやすい物があると思うので、なるべく多くの人が使用できるようバグのないように制作していくことは大事ですね。

マルチデバイス対応だとか、どこまで全てのブラウザに対応するだとかそういったことを考えさせられました。

ちなみに、申し訳ないことですが、IEの古いブラウザに関しては今回は加味しておりません。
でもたぶんSurfaceでそんなに古いIEを使っているとは思えないので大丈夫だろうと思います。

参考サイト

参考にさせていただいたサイトさまありがとうございました。

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です