[Edge]。読取専用。→、
Event.preventDefault() の呼び出しによりブラウザーがイベントをキャンセルしたか否かを論理値で示します。
| Event | イベント オブジェクト(¶Event、MouseEvent、…)。 |
|---|
論理値で、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("処理は抑制されませんでした。");
}
}