JavaScript:jQueryでHTMLのデフォルト動作(default behavior)を抑止する

HTML5/CSS3/JavaScript は従来のWebページ作成のためだけの仕様ではありません。

Webアプリケーションの開発時に、HTML固有の動作を別のメソッドに置き換えて処理しなければいけないようなとき、今回の preventDefault が必要になります。

更新履歴
[2014.04.17] HTMLサンプルの追加・コンテンツのレイアウトと誤植を修正しました。

jQueryでHTMLのデフォルトの動作(default behavior)を抑止する

HTMLでのデフォルト動作(aタグやformのsubmitボタン等)を抑止したい場合には preventDefault() を呼び出す。

サンプルコード

HTML
<html>
<body>
<p id="test_id">sirochro.comトップページは<a href="http://sirochro.com/">こちら</a>です。
</body>
</html>
JavaScript(jQuery)
function preventTest() {
    $('#test_id a').click(function(e) {
        e.preventDefault(); // HTMLデフォルトの動作を抑止する
    });
}

次の「こちら」というテキストリンクはHTML sirochro.com のトップページへリンクしているが、クリックしてもページが遷移せず、アラートでリンク先が表示される。

結果

sirochro.comトップページはこちらです。

まとめ

preventDafault は ajax 処理のときや form 送信を一旦フロントで処理したい場合は必要な組み込みメソッドです。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents