web-dev-qa-db-ja.com

リンククリック時のJavaScriptポップアップアラート

リンクをクリックしたら、JavaScriptの「OK」/「キャンセル」アラートが必要です。

私はアラートコードを持っています：

<script type="text/javascript">
<!--
var answer = confirm ("Please click on OK to continue.")
if (!answer)
window.location="http://www.continue.com"
// -->
</script>

しかし、特定のリンクをクリックしたときにのみ実行されるようにするにはどうすればよいですか？

javascripthyperlinkalertconfirmconfirmation
18
user1022585

機能させるだけで、

<script type="text/javascript">
function AlertIt() {
var answer = confirm ("Please click on OK to continue.")
if (answer)
window.location="http://www.continue.com";
}
</script>

<a href="javascript:AlertIt();">click me</a>
13
ocanal

onclick属性を使用できますが、return false続行したくない場合。

<script type="text/javascript">
function confirm_alert(node) {
    return confirm("Please click on OK to continue.");
}
</script>
<a href="http://www.google.com" onclick="return confirm_alert(this);">Click Me</a>
26
muzuiget

単一行で問題なく動作します：

<a href="http://example.com/"
 onclick="return confirm('Please click on OK to continue.');">click me</a>

同じページに別のリンクを持つ別の行を追加してもうまくいきます：

<a href="http://stackoverflow.com/"
 onclick="return confirm('Click on another OK to continue.');">another link</a>
12
Dmytro Dzyubak

これを行うには、ページ上の特定のアンカーにハンドラーをアタッチする必要があります。このような操作では、 jQuery のような標準フレームワークを使用する方がはるかに簡単です。たとえば、次のHTMLがある場合

HTML：

<a id="theLink">Click Me</a>

次のjQueryを使用して、その特定のリンクにイベントをフックできます。

// Use ready to ensure document is loaded before running javascript
$(document).ready(function() {

  // The '#theLink' portion is a selector which matches a DOM element
  // with the id 'theLink' and .click registers a call back for the 
  // element being clicked on 
  $('#theLink').click(function (event) {

    // This stops the link from actually being followed which is the 
    // default action 
    event.preventDefault();

    var answer confirm("Please click OK to continue");
    if (!answer) {
      window.location="http://www.continue.com"
    }
  });

});
3
JaredPar