BETA

aタグにalertやconfirmを使う(JavaScript)

投稿日:2018-12-11
最終更新:2018-12-26

よくconfirmのやり方を調べてしまうので個人的まとめ。

クリックした際、aタグを無効にして実行

JavaScript- event.preventDefault()

$('a#id').on('click', function() {  
    event.preventDefault();  
    // ここに走らせるスクリプトを書く  
});  

event.preventDefault() は、リンクを無効にしながらクリックイベント自体は走らせるため、それ以降のスクリプトも実行される。

JavaScript- return false

$('a#id').on('click', function() {  
    // ここに走らせるスクリプトを書く  
    return false;  
});  

return false の場合、それ以降のスクリプトが実行されないため、走らせたいスクリプトの下に書く。

html + Css + JavaScript

<a href="" onclick="【ここにJS部分を書く】" style="pointer-events: none;"></a>  

pointer-events: none; はCSS3で環境によって挙動に差があるため、IEなどで動かない可能性あり。

html + JavaScript

<a href="javascript:void(0);" onclick="【ここにJS部分を書く】"></a>  

aタグ を無効にするには javascript:void(0) をhrefに置く。
そして onclick 部分に実際のスクリプトを書いていく(onclickだけではなくonkeypressなどの指定も可能)

alert

alert('このスクリプトを実行しますか?');  

confirm

1行で書く

var ok=confirm('このスクリプトを実行しますか?'); if(ok) location.href='【リンク先】'; return false;  

数行に分けて書く

if(confirm('このスクリプトを実行しますか?')) {  
    location.href='【リンク先】';  
} else {  
    return false;  
}  

aタグに直接書く際に気をつけること

  • jQueryで書く際、JavaScriptが使えない環境下ではそのままhrefに飛んでしまうため、注意が必要。
  • <noscript>JavaScriptをオンにしてください。正常に動作しない場合があります。</noscript> と記載した上で href="javascript:void(0);" にするのが安全性は高い。
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

web中心のメモ置き場。プログラミングからデザインまで。

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!