ontouchstartでclickやtouchを切り替えちゃ駄目。windowsタブレットはontouch関数が存在するのだ。

Author:

なんか他社のサービスでクリックイベントが効かないバグがありまして。
Web系のエンジニアである自分はつい調べてしまったのです。
で、その結果驚くべきことが。
どうやらontouchstartイベントが原因でおかしくなっているっぽいんですよ。

ontouchstartハック

最近javascriptでよくある事例ですが、ontouchstartイベントが存在する場合touch系イベントハンドラ、存在しない場合click系イベントハンドラを使うというハックがあります。
基本的にそれでPC/スマホの切り分けはできます。
当然のことながら、MacBookはタッチスクリーンじゃないからontouch系関数なんてありません。
if (“ontouchstart” in window)とかif文を用意したら中には入ってきません。

が、タッチスクリーン対応のwindowsマシンに対してはこれあかん。
SurfaceBookとかwindowsタブレットはタッチスクリーンなので、ontouch系関数が用意されているのです。
だからif (“ontouchstart” in window)とかやったら中に入ってきてしまいます。
ひえー、これは気づきにくいバグだ。
もちろんクリックでontouchイベントハンドラーが呼ばれることは無いのですが。
そのせいでontouchしか定義していないと不具合になってしまう。

ブラウザ問題ではなく、ハード問題にも気をつける

クロスブラウザっていう問題はWebやっている人なら一度や二度はぶつかったバグでしょう。
が、ハード的問題ってのはこれは気づかないですよ。
みんなドヤ顔でMacBook使ってWeb開発してますからねえ。
MacBookじゃ絶対に発生しないバグ。
しかし一般人はwindowsのほうが圧倒的に多いので発生しがち。

自分はやっぱりWindowsが好きだし、このSurfaceBookも使いやすいから、だから気づけた。
色々な偶然が積み重なった結果ではあるものの、これは驚いた。

ってことで、動作検証にはIE、Chrome、FireFox、safari、Edgeあたりでやってる会社がほとんどだと思うのですが、
タッチパネル付きのwindowsとタッチパネル無しのwindowsの違いが存在するってのを忘れないように。
いやーそれにしてもびっくりした。

Facebook にシェア
Pocket