初心者によるjavaScriptによるpreventDefaultについての学習

今回はpreventDefaultです。

preventDefaultとは「要素に設定された規定の動作をキャンセルする」です。

例として長い本文を途中で区切り、「続きを読む」などをクリックさせて全文を表示されるというものです。

  <style>
    .hidden {display:none;}
  </style>

  <p>
    text. text. text. text. text.   <span class="hidden">
    text. text. text. text. text. text. text. text. text. 
    text. text. text. text. text. </span><a href="">続きを読む</a>
  </p>

適当にこうしておきます。

次に

main.js

  const a = document.querySelector('a');
  const span = document.querySelector('span');

  a.addEventListener('click', () => {
    a.classList.add('hidden');
    span.classList.remove('hidden');
  });

このように書いておきます。
aとspanを定義して、aをクリックしたらhiddenクラスをつけて[続きを読む]を非表示にし、
逆にspanからhiddenクラスを外すことで全文表示させるというもの。

ただしこれだと、クリックした一瞬表示されるがすぐ戻ってしまいます。
それはなぜかというと<a href="">と空のため、このページ自体に遷移し元の状態に戻ったから。

それを解消するための手段の一つとして、preventDefaultを使う。
繰り返しになるが、preventDefaultとは「要素に設定された規定の動作をキャンセルする」。
aタグの規定の動作「ページ遷移」をキャンセルさせることで、元の状態に戻るのを防ぐ目的です。

main.js

  a.addEventListener('click', e => { // ()をeに変更
    e.preventDefault();
    a.classList.add('hidden');
    span.classList.remove('hidden');
  });

では次は、本文省略時は「続きを読む」、全文表示時には「省略する」にして、表示非表示を切り替えられるようにしましょう。

  <p>
    text. text. text. text. text.   <span class="hidden">
    text. text. text. text. text. text. text. text. text. 
    text. text. text. text. text. </span><a href=""></a>
  </p>

html側ではaタグの中身を削除。

main.js

  const a = document.querySelector('a');
  const span = document.querySelector('span');

    a.textContent = '続きを読む'

  a.addEventListener('click', e => {
    e.preventDefault();
    if (span.classList.contains('hidden')) {
      span.classList.remove('hidden');
      a.textContent = '省略する'
    } else {
      span.classList.add('hidden');
      a.textContent = '続きを読む'
    }
  });

JavaScript側では、まずaのテキストに続きを読むを追加し
spanのhiddenクラスがあるかないかで切り分けてみました。

とりあえずはこれで切り替えられるようです。
（本当はtoggleを使いたかったのですが、どうもうまく行かなったです。
もしアドバイスいただければ嬉しいです）

preventDefaultは何かと使えそうです。
何かをやらせたいのに、別の動作が引っかかるときなどに重宝しそうですね。