【CSS】pointer-eventsでマウスイベント無効に
レスポンシブや要素が重なり合ってる際など特定の場合にクリックやタップを無効にしたりしたい時がまれにあると思います。
そんな時にCSSでpointer-eventsというプロパティが使えます。
pointer-events: none;
これでマウスイベントを無効化します。
position:absoluteなどで上に要素があって下の要素のイベントが動かない時には、上の要素にpointer-events: none;を指定すればちゃんと下の要素のイベントが動作します。
Opera Miniを除くほぼすべてのブラウザでサポートされてるので使い勝手が良いですね。
参考サイト
1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
HTML＆CSSとWebデザインが 1冊できちんと身につく本
初心者からちゃんとしたプロになる Webデザイン基礎入門〈HTML、CSS、レスポンシブ
