[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("処理は抑制されませんでした。"); } }