[ＪａｖａＳｃｒｉｐｔ] preventDefaultが動かない？

こんばんは

クリック等のイベントの動作をpreventDefaultを使って動作させたいのですが、上手く行きません
どこか間違っているのでしょうか？

例えば、このサイトの右上の「質問・相談する」のクリックに対して下記コードを実行したのですが、クリックが無効化されません

document.getElementsByClassName("mainBtn headerBtn")[0].addEventListener("click",function(event){event.preventDefault();},{passive:false});

なぜでしょうか？
宜しくお願い致します

Chrome： 84.0.4147.89

No.2 回答者： yambejp 回答日時： 2020/07/29 12:19

mainBtnかつheaderBtnのクラスがついた一番最初のHTML要素だけ処理すればよいのでしょうか？

document.querySelector(".mainBtn.headerBtn").addEventListener("click",function(event){
event.preventDefault();
},{passive:false});

No.1 回答者： fujillin 回答日時： 2020/07/29 10:04

こんにちは

preventDefaultはブラウザのデフォルト動作をキャンセルさせるものです。
例えば、リンク要素をクリックした際のリンク動作などがこれに当たります。
https://developer.mozilla.org/ja/docs/Web/API/Ev …

一方で、ここのソースをご覧になればわかると思いますが、ご質問の部分にリンク要素は設定されてはいるものの、クリックの際の動作はデフォルトのリンクによるものではありません。
（href属性に設定されている先に遷移しているわけではない）
ご質問の要素のクリックで、どの様にして遷移しているのかは確認していませんが、多分、スクリプトによるものではないでしょうか？
ちなみに、（↑）の参照先にも説明がありますが、「キャンセル不可のイベント」に対してもpreventDefaultの効果はありません。


さて、想像するところ、ここのページでは、上位要素でイベントを監視してジャンプする仕組みをとっているのではないかと思いましたので、試しにイベントの伝搬を停止させてみたところ、クリックしても質問入力のページには飛ばなくなりますね。

document.getElementsByClassName("mainBtn headerBtn")[0].addEventListener("click",function(event){event.stopImmediatePropagation();});

（Chrome 84.0.4147.89 にてテスト）