okinawa

IT勉強メモ

JavaScriptのreturn falseでイベント制御

return falseの意味を知らなかったのでメモ。

JavaScriptのイベントってonclickとかaddEventListenerとかでイベント設定して、それを制御するのだけだと思っていた。

けど、htmlのイベントも制御できるようです。

return falseとかで。

  • リンククリック
  • formタグのsubmit

こういうhtmlのイベントをストップできる。

<a id="link" href="google.co.jp">リンク</a>
let link = document.getElementById("link");

link.addEventListener('click', function(e) {

e.preventDefault(); //画面遷移しない
e.stopPropagation(); // 画面遷移しない。
return false; // 画面遷移しない。
});

それぞれの違いなどは下記参考サイトがわかりやすい↓

freelance-jak.com

リンクやsubmitをクリックするとhtmlのイベントより前に、JavaScriptのclickイベントが発生するんですね。