pointer-eventsの使い方
GROWI で発生した Bug の修正を元に、 pointer-events の使い方をまとめます。
症状
GROWI はコメント返信機能があり、コメントに対するスレッドとして子コメントを表示する。
子コメントが 3 件以上付くと 2件を除いて子コメントが省略されますが、それを表示する more ボタンをクリックしても、省略された子コメントが表示されなくなってしまいました。
原因
User からの要望を実現 しコメントにアンカー機能を追加した際に、コメントに margin: -50px; padding:50px; を指定したため、 more ボタンがコメントに被さってしまい押せなくなっていました。
解決方法
上に被さっている page-comment クラスに対して、 pointer-events: none; を指定することで解決できました。
pointer-events とは、ポインターイベントの対象になる可能性のある環境 (存在する場合) を設定するプロパティです。
今回実装した none によって、 comment はポインターイベントを無視し、その下にある要素である more ボタンがクリックに反応するようになりました。
しかしさらなる問題点
無事省略コメントを表示できて解決! とはいかず、別の問題が発生しました。
page-comment に pointer-events: none; を指定したことによって今までコメント右上に表示されていた編集ボタンや削除ボタンが表示されなくなってしまいました。
pointer-events: none; はクリックのみならずポインターイベント全てを無視します。そのため、 hover イベントも無視されてしまったのです。
ちなみに hover でボタンを表示する該当部分1
// show when hover .page-comment-main:hover > .page-comment-control { display: block; }
最終的なコード
hover を受け付けるために pointer-events: auto; を page-comment-main クラスに指定しました。
これによって more ボタンは有効に 編集ボタンや削除ボタンは hover 時に表示されるようになりました! 💯
終わりに
なかなか使わない pointer-events について Bug 修正することで知ることができました。
SVGで使うときは他の値もありますが、そうでなければ auto と none を理解しておけば良いと思います!