制作ブログ Web制作マークアップJavaScripttouchendがAndroidで効かない?!

touchendがAndroidで効かない?!

数年前にも同じことでハマってしまったのに、同じ過ちを繰り返してしまったので備忘録。

今回の調査端末は、SC-04F(Android 5.0)と iPhone 6S(iOS10.2)です。

まずは、タッチイベントをチェックするページを用意しました(touchイベントの認識するデバイスでのみテストできます)。
https://sample.simplesimples.com/touch/check.html

タップのみは想定どおり

touchstart → touchend

AndroidもiOSも期待通りで、touchstartとtouchendを的確に認知して処理してくれる。

タップ中に移動したら、Androidが想定外すぎる

touchstart → touchmove → touchend

iOSは見事な動き。期待どおり。touchstartから始まり、タップ中に移動するたびに、touchmoveの処理が繰り返し実行され、タップを離したらtouchendの処理で終わる。

Androidではtouchstartまではいい。タップ中に移動した直後に、tochmoveの処理するのもいい。
だがしかし。
移動するたびには、touchmoveの処理が行われない。まれに2回。まれにってなんだ!そしてタップを離したらtouchmoveの処理がまれに起きる。まれにだとぉ!?そしてtouchendじゃないんかーい!
touchmoveにツッコミ1つ、touchendにツッコミ2つなのです。

touchmoveの一回目と画面の表示上部位置で擬似的touchendをつくる!

そこで、下記3点を踏まえて擬似的touchendを作ります。

  • touchstart
  • touchmove(ただし、動かした直後の1回目のみにフォーカスしつつ、2回目以降もあるかもしれないことにケア)
  • 画面の上部表示位置を監視する