///

touchendがAndroidで効かない?!

wrote :

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

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

まずは、タッチイベントをチェックするページを用意しました(touchイベントの認識するデバイスでのみテストできます)。
http://www.allinthemind.biz/sample/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回目以降もあるかもしれないことにケア)
  • 画面の上部表示位置を監視する

川上 武範(かわかみ たけのり)
1975年生。シンプルシンプルデザイン代表兼Webクリエイター。たびのとWebサイト運営責任者。

企画からサイト設計、正しいマークアップを意識したWebサイト制作やユーザー視点の情報設計を得意としている。

シンプルシンプルデザイン
たびのと
twitter : たけたけ@OnlyTwo

メディア掲載
2016年10月25日 レバテックフリーランスの記事「自作Webサービス記事紹介まとめ」でサイト内の記事「Webサービス「たびのとTOKYO」を作ってみました」を紹介していただきました。