タッチができるかどうかを調べたい

Question

javascript初心者です。　teratail初心者でもあるのでよろしくお願いいたします。

javascriptを勉強していまして、スマホ用にタッチイベントを判定するってところをやっています。

ある参考書を読んでいたところ、デスクトップブラウザとモバイルブラウザで処理を分岐させたいときの

判定の仕方の部分で理解できなかったので、お力添えをお願いします。

const isSupported = !!(
    'ontouchstart' in window ||
    (navigator.pointerEnabled && navigator.maxTouchPoints > 0)
);

やっていることは理解しているのですが、頭の方のある !!←この部分の必要性が分かりません。

NOT の NOT で結局戻ってきているのでは？　と思っているのですが、

もしかして私の勉強不足で違う意味があるのかと考えております。

どうか、お力添えの方よろしくお願いいたします。

---

もう１つ、click, touch イベントの実装について皆様にお聞きしたいのですが、

touch も click も今はそこまで遅延がないから、極論click だけでもいいのでは？と言われましたが

実際のところどうなのでしょうか？

よろしければ、こちらの方の質問もよろしくお願いいたします。

Answer 1

'ontouchstart' in windowがfalseかつnavigator.pointerEnabledがundefinedのとき、外側の括弧のなかの値はundefinedになります。というのも、javascriptの||や&&はbooleanを返すわけではないからです。そこで、論理否定演算子を2回重ねてbooleanにキャストしています。

必要ないと言えば必要ない(undefinedはfalse扱いのため)のですがundefinedであると不都合も確かにあるため、こういう書き方をすることも多いです。

touchとclickの扱いですが、マルチタッチを考慮しないならclickの方が手軽です。また、ドラッグやスワイプの検出を行いたいときもmousedown、mouseupとtouchstart、touchendを区別する必要があります。ただ、両方を纏めたpointerdown、pointerupというイベントも存在するので、使えるならこっちの方が手軽ではありますね。Safariが未対応というのは痛すぎるので、考えた方がいいとは思いますが。

Comments

[norino]

frodo821さん、ありがとうございました。
二重NOTでundefined を boolean値にするテクニックがあるなんて・・・。

もう一つの質問も答えてくださって、ありがとうございます。
ブラウザ判定やイベント判定が苦手なので大変参考になりました。

お忙しいところ、時間を割いてくださって本当にありがとうございました。

[frodo821]

二重否定はboolean化の常套手段なので覚えておいて損はないと思います。

それから、||や&&を使ったテクニックとして、オブジェクトのデフォルト値があります。

let obj = {...}; //何らかのオブジェクト
let foo = obj.foo || 0;
let bar = obj.bar || "hoge";

このようにすると、obj.fooがfalseと評価されるような値(undefined, null, 0など)のとき、||の右側の値が代わりに使われます。いくつか問題点(0や空文字列などが想定された入力の場合、それらの値のかわりにデフォルト値が使われてしまう)もありますが、これで十分な場合も多いので、こちらも覚えておいて損はないと思います。

[norino]

frodo821さん、度々ありがとうございます。

今回教えてくださったテクニックは、最近参考書で見かけてたのですが、
初めて見る書き方で、それについては何も説明されていなくて
間違えてレベルの高い参考書買ってしまったなと思っていたところです。

ネットで調べようにも、検索ワードが思いつかず、
繰り返して実行結果みて、こうなるんだと思うしかないなと言い聞かせていたところなので、
frodo821さんの説明があると、これで良かったんだと再確認ができて本当に助かります。
万全ではないという情報の存在が特に助かります。

boolean,undefined,null,||,&&の１つ上の学習ができて良かったです。
本当にありがとうございました。