blog上野谷根千界隈でまったりと暮らしているWeb系フリーランスの雑記ブログです。Webやフリーランス、グルメなどについてもしゃもしゃ書いてます。Update:2019/10/31こんにちは、katori@xxbicotです。スマホでhoverアクションを適用するかどうか。ユーザビリティ的な考えだと適用しない方が多数かな、と思いますが、適用したいという人もいるかと思います。この間、スマホでのhoverアクションを初めてテストする機会があったんですが、Chromeの開発者ツールでばんばん警告が出てびっくりしました。(「違反」)という文字にびびって色々調べたのでアウトプットしていきます。参考サイトontouchstartによるスマホでのhoverアクションの有効化これまでスマホではhoverアクションは使わない方向でコーディングしていたので、まずどう書けばhoverを表現できるのかを検索。いくつかすぐヒットしました。HTMLに「ontouchstart」のイベントハンドラを書くと、その要素に対してCSSで記述していたhoverアクションが効くとのこと。試したところ、本当にこれだけでスマホでhoverアクションが表現できました。開発者ツールのコンソールに次のような警告がでるようになりました。スクロールジャンクの警告メッセージ全文はこちら。非受動的なイベントリスナーをスクロールブロッキングの「touchstart」イベントに追加しました。ページをより敏感にするには、イベントハンドラを「passive」としてマークすることを検討してください。メッセージを見ても何についてどう注意されているかピンと来なかったので、chromeのページやブログから色々調べました。最初に、主にスマホでページをスクロールする際、画面のスクロールが指の動きについてこない、遅延があるといった現象をスクロールジャンクと言います。Listenerを使ってね!」というのがこの警告メッセージのようです。スクロールジャンクが起きるのかタッチイベントで何かの関数を実行する際、スクロールを止める処理(preventDefault())をいれることってありますよね。ブラウザ側はスクロールする際、登録されたタッチイベントの中にpreventDefault()がないかをチェックし、無いことが確認できてからスクロールを開始するような仕様になっています。逆に言うと、その確認が終えるまではスクロールが開始できないため処理が詰まる=スクロールジャンクが発生する、という流れのようです。公式にスクロールジャンクが発生している端末とそうでないものを並べてスクロールする比較検証動画があげられていました。Listeners遅延の度合いは処理の長さによるようですが、こちらを見ると中々快適とは言えない感じですね。Listenerを使用するにはこのスクロールジャンクを防ぐにはイベントリスナー登録時に、「この処理内では”preventDefault()”を使わないよ!」という宣言をします。すると、ブラウザは処理を全て確認した後ではなくすぐにスクロールに移ってくれます。true}の部分です。document部分は、touchstartを設定したい要素と差し替えてもOK。true}を設定すると良いとのことです。実際に試してみる先ほどのスマホhover有効化のためにontouchstartを使ったコードを簡易化し、先ほどの警告が本当に出なくなるのか確かめてみました。ontouchstartを追加せず、cssでhoverをスタイリングしただけの状態。メッセージなし次に、先ほどのコードのbodyにontouchstart追加した状態。〜)「ontouchstart」を追加したことで警告が表示されました。メッセージなし無事警告が解消されることが確認できました!ちなみに、スマホのhover有効化には「ontouchstart」をHTMLの要素に追加すると書きましたが、上記の通りjsでaddEventListenerを書く方法でも問題ないことを確認しています。スマホhover有効化目的であればjsで書いておくと良さそうですね。ついでにhtmlのontouchstart=””の記述の中でpassiveオプションを指定できないかなーと思ったんですが、こちらは調べても出てきませんでした。́∀`)chromeの開発者ツールのメッセージは、拾えば拾うほどコンテンツのクオリティが洗練されていくのを感じるので結構好きです。触れてこなかった知識も、こういった警告を深掘りするとなんとなく分かるのが楽しいですね。Listener”についてでした。WORDPRESS(13)Profilekatori在宅フリーランスのWebデベロッパー(フロントエンドエンジニア、コーダー)です。東京の上野谷根千界隈でまったり仕事してます。