いざ「活用する具体例を挙げろ」と言われると難しいですが、実装はカンタンです。本日は「JavaScript+jQueryでクリックイベントをキャンセルする」についてです。
こんにちは。猫ITソリューションズ広報の齊藤メイ(♀)です。本日は、「JavaScript+jQueryでクリックイベントをキャンセルする」についてです。
貴重な情報に感謝いたします。
IEでpreventDefaultを使うときにはまったこと - Qiita
仕様と要件
「活用する具体例」がたまたま見つかったのでこの記事は書かれていたりします。コレです。
- ボタンはaタグをCSSで加工して作られている
- しかしaタグをクリックしてからのページ遷移は無効にして、違う処理を行わせたい
そもそもhtmlコーディング仕様が(かなり)明確に決まっていれば発生しないことではあるのですが、スピード命の特に"多人数開発"においてはよくあること?です。
サンプル
htmlは割愛してJavaScript+jQuery部分のみです。
1 2 3 4 5 6 7 |
$('#help_nationals').on('click', function(event) { //aタグ無効化 (event.preventDefault) ? event.preventDefault():event.returnValue=false; //本来やりたい処理はここ以降に記述 }) |
サンプルの具体例は他にやりようもあったりします。が、重要なのはJavaScript構文であるevent.preventDefaultです。この辺りの処理は俗に「イベントのバブリング」と呼ばれています。詳しくは以下をご参照ください。
event.preventDefault - Web API インターフェイス | MDN