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);" にするのが安全性は高い。
記事が少しでもいいなと思ったらクラップを送ってみよう!
19
+1
@tanakashiの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする