エンジニアのひよこ_level10

【毎日更新!】新卒4年目エンジニアブログです!

【CSS】クリックイベントが出来なくなるpointer-events: noneの特性と、使うべきときではない話【978日目】

クリックイベントをなくしたい

    <button onclick="alert('test');">押せる</button>
    <button onclick="alert('test');" disabled>押せない</button>
    <button onclick="alert('test');" style="pointer-events: none;">押せない</button>

このように、ボタンを押せなくする方法はいくつかあります。

どれも押せなくなるのであればいいじゃないかと思いますが、
挙動はそれぞれ違います。

そこで問題です。

タグを多重にした場合はどうなる?

では、以下のように階層構造にした場合、どのような挙動になるでしょうか。

    <button onclick="alert('test');"><a href="http://www.nyamucoro.com">1</a></button>
    <button onclick="alert('test');" disabled><a href="http://www.nyamucoro.com">2</a></button>
    <button onclick="alert('test');" style="pointer-events: none;"><a href="http://www.nyamucoro.com">3</a></button>

結果

  1. アラート表示後、ページが遷移する
  2. ページ遷移のみ行われる
  3. ページ遷移が行われない

これはなぜでしょうか。

挙動の考察

1.は、まずHTMLのイベント伝播は、トリガーとなった場所の一番上にある要素が実行されて、その後下にある要素が実行されていきます。
今回、ボタンの下にaタグがあるので、アラート表示後に画面遷移が行われました。

2.は、ボタンの挙動を無効化はしましたが、中にあるaタグの挙動は無効化されてないので、aタグの挙動が実行されました。

3.は該当する場所において、カーソルを合わせて実行する挙動を無効化されているので、その位置においてイベントが実行されませんでした。

用途と特性を考えてコードを書こう

CSSはデザインに注目することを忘れずに、画面の挙動を変えるために使うと捉えないでおきましょう。

あくまでデザインの領域に対して変動させるものなんので、『場所』において何かが起こる。
今回書きたいコードは『場所』に対して何かをしたいのか、『タグ』や『パーツ』に対して何かしたいのかを適切に考えてコードを書きましょうφ(・