クリックイベントをなくしたい
<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.は、まずHTMLのイベント伝播は、トリガーとなった場所の一番上にある要素が実行されて、その後下にある要素が実行されていきます。
今回、ボタンの下にaタグがあるので、アラート表示後に画面遷移が行われました。
2.は、ボタンの挙動を無効化はしましたが、中にあるaタグの挙動は無効化されてないので、aタグの挙動が実行されました。
3.は該当する場所において、カーソルを合わせて実行する挙動を無効化されているので、その位置においてイベントが実行されませんでした。
用途と特性を考えてコードを書こう
CSSはデザインに注目することを忘れずに、画面の挙動を変えるために使うと捉えないでおきましょう。
あくまでデザインの領域に対して変動させるものなんので、『場所』において何かが起こる。
今回書きたいコードは『場所』に対して何かをしたいのか、『タグ』や『パーツ』に対して何かしたいのかを適切に考えてコードを書きましょうφ(･･
