DOM

Event.defaultPrevented プロパティ

 編集:2022.09.18 by T.A.

[Edge]。読取専用。→

Event.preventDefault() の呼び出しによりブラウザーがイベントをキャンセルしたか否かを論理値で示します。

構文
Event.defaultPrevented
Event イベント オブジェクト(¶EventMouseEvent、…)。

論理値で、true は既定のユーザー エージェントの動作が抑制されたことを、false はそうではないことを表しています。

この例は 2 つの <a> 要素のリンクを訪れる試みをログ出力します。JavaScript は 2 番目のリンクの動作を抑制するために使用しています。

HTML:

<p><a id="link1" href="#link1">Visit link 1</a></p>
<p><a id="link2" href="#link2">Try to visit link 2</a> (you can't)</p>
<p id="log"></p>

JavaScript:

function stopLink(event) {
  event.preventDefault();
}

function logClick(event) {
  const log = document.getElementById('log');

  if (event.target.tagName === 'A') {
    if (event.defaultPrevented) {
      log.innerText = 'Sorry, but you cannot visit this link!\n' + log.innerText;
    }
    else {
      log.innerText = 'Visiting link...\n' + log.innerText;
    }
  }
}

const a = document.getElementById('link2');
a.addEventListener('click', stopLink);
document.addEventListener('click', logClick);

HTML:

<A id="link1" href="#link1">リンク1</A><BR>
<A id="link2" href="#link2">抑制リンク</A><BR>
<SPAN id="log"></SPAN>

JavaScript:

function stopLink(eve){ //抑制処理
  eve.preventDefault(); //抑制させる。
}
function logClick(eve){ //状況データ表示:
  let Y=eve.target;     //イベントが起きた要素オブジェクトの取得。
  if(Y.tagName=='A'){   //その要素がAだったら、
    if(eve.defaultPrevented){ //抑制されているか?
      log.innerText="抑制されています。";
    }else{
      log.innerText="通常リンクです。";
    }
  }
}
link2.addEventListener('click', stopLink);    //link2のクリックで抑制させる処理の組み込み
document.addEventListener('click', logClick); //documentにclickイベント組み込み。データを表示させる。

抑制されたリンクは、アンカーに着くことをしない。

HTML:

<INPUT onclick="Job(event)" type=checkbox>←これをクリックしてみて

JavaScript:

function Job(eve){      //クリックされた時の処理:
  eve.preventDefault(); //イベントの抑制をブラウザーに通知。
  if(eve.defaultPrevented){ //抑制されているか?
    alert("処理は抑制されました。");
  }else{
    alert("処理は抑制されませんでした。");
  }
}

テスト