HTML5/CSS3/JavaScript は従来のWebページ作成のためだけの仕様ではありません。
Webアプリケーションの開発時に、HTML固有の動作を別のメソッドに置き換えて処理しなければいけないようなとき、今回の preventDefault が必要になります。
- 更新履歴
- [2014.04.17] HTMLサンプルの追加・コンテンツのレイアウトと誤植を修正しました。
INDEX
jQueryでHTMLのデフォルトの動作(default behavior)を抑止する
HTMLでのデフォルト動作（aタグやformのsubmitボタン等）を抑止したい場合には preventDefault() を呼び出す。
サンプルコード
- HTML
- [code]
sirochro.comトップページはこちらです。
[/code] - JavaScript(jQuery)
- [code]
function preventTest() {
$(‘#test_id a’).click(function(e) {
e.preventDefault(); // HTMLデフォルトの動作を抑止する
});
}
[/code]
次の「こちら」というテキストリンクはHTML sirochro.com のトップページへリンクしているが、クリックしてもページが遷移せず、アラートでリンク先が表示される。
結果
sirochro.comトップページはこちらです。
まとめ
preventDafault は ajax 処理のときや form 送信を一旦フロントで処理したい場合は必要な組み込みメソッドです。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
