onbeforeunloadとaタグのhref属性について

前へ 次へ
このQ&Aのポイント
  • onbeforeunloadイベントとaタグのhref属性について解説します。
  • 「教えて！」をクリックするとfoo()関数が実行されますが、「goo」をクリックするとonbeforeunloadイベントが発生し、alert実行後にfoo()関数が実行されます。
  • javascriptでhref属性を指定した場合、実際のリンク先に遷移せずにJavaScriptの処理が実行されるため、クリックしたときの挙動が異なります。
回答を見る
  • ベストアンサー

onbeforeunload と aタグの href 属性について

<body onbeforeunload="alert('quit');"> <a href="#" onclick="foo();">教えて！</a> <a href="javascript:foo();">goo</a><br> ↑このように書くと、 「教えて！」をクリックすると、foo()関数のみが実行されますが、 「goo」をクリックすると onbeforeunload のイベントが発生し、alert実行後foo()関数が実行されます。 href に記述した javascript についての詳しい処理内容についてご存知の方がいましたら教えてください。 クリックしたときのこの二つの違いってなんなのでしょうか？？

質問者が選んだベストアンサー

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.2

onbeforeunloadは、ブラウザが閉じられたり、現在のページから移動したときに実行されます。 リンクでhref="#"を指定した場合は、自ページを意味しますが そうでない場合は、別ページへの移動ということになるためそのような動作になるのではないでしょうか <a>は基本的にはリンクを表すものですから、単に関数を実行したい場合は、ボタンを使うのがいいと思います。 <button type="button" onclick="foo()">ｇｏｏ</button> 文字列のままで、リンクのようなアンダーバーが必要というのであれば <span style="text-decoration:underline" onclick="foo()">ｇｏｏ</span>とか <span onclick="foo()"><u>ｇｏｏ</u></span> とかするといいかもしれません。

その他の回答 (1)

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

onbeforeunloadは、ブラウザが閉じられたり、現在のページから移動したときに実行されます。 リンクでhref="#"を指定した場合は、次ページを意味しますが そうでない場合は、別ページへの移動ということになるためそのような動作になるのではないでしょうか <a>は基本的にはリンクを表すものですから、単に関数を実行したい場合は、ボタンを使うのがいいと思います。 <button type="button" onclick="foo()">ｇｏｏ</button> 文字列のままで、リンクのようなアンダーバーが必要というのであれば <span style="text-decoration:underline" onclick="foo()">ｇｏｏ</span>とか <span onclick="foo()"><u>ｇｏｏ</u></span> とかするといいかもしれません。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • a href のリンク先に引数を追加

    こんにちは、お世話になっております。 以下のソースを変更して、リンク先クリック時、hrefで指定したアドレスに、コンボボックスで選択された引数を付加したURLを実行したい。 例のように、何らかの方法でユーザーに引数を選択させるようにしたい。 "foo1.cgi?val=first" "foo1.cgi?val=second" javascript等使用しないと実現不可能でしょうか？ 教示お願い致します。 <html> <body> <strong>引数を選択</strong> <select name="option"> <option value="first" selected>first <option value="second">second <option value="third">third </select><br><br> <strong><a href="foo1.cgi"> foo1を実行 </a></strong><br><br> <strong><a href="foo2.cgi"> foo2を実行 </a></strong><br><br> <strong><a href="foo3.cgi"> foo3を実行 </a></strong><br><br> </body> </html>

    • ベストアンサー
    • HTML
  • a.href の href を有効か無効にする選択

    <script language="JavaScript"> function fa(obja){ if(confirm())obja.href="a.html" else{obja.href=eval("javascript:void(0)") inp.value=0//↑がうまくいかない。hrefを無効にしたい。 } } function fb(objb){ if(confirm())window.location="a.html" else{inp.value=0//↑がvoiv(0)によって無効で動作しない。 } } </script> <a href=a.html>りんく</a><a href=javascript:voiv(0) onClick=inp.value=0>ばりゅ</a> <br>↑と同じようなことを1つのaタグでやりたい<br> <a href="" onClick=fa(this)>失敗A</a><br> <a href=javascript:voiv(0) onClick=fb(this)>失敗B</a><br> <input id=inp> 選択によってクリックのアクションを変更したいんだけど、 1方のアクションはリンク、もう1方はJavaScriptです。 ボタンとかならできるんだけど、クリック済みかを 色分けしたいからaタグでやりたいんです。 よい方法を教えてください。

  • <a href="#" …>の意味を教えてください。

    Javascriptを見ていると <a href="#" onClick="new_open();return false"> なる記述がありますが、 この<a href="#" の部分の意味を教えてください。 <a herf まではわかるのですが、この＃はどのようないみなのでしょうか？

    • ベストアンサー
    • HTML
  • javascriptにてonclickを無効

    javascriptにてonclickを無効にしたい 下記のように、onclickイベントキャンセルを書きましたが、 onclickのjavascriptが実行されます。 何かヒントはありませんか？ <html> <head> <script language="JavaScript"> document.onclick = function(e) { event.returnValue = false; } </script> </head> <body> <a href="a.htm" onclick="alert('onclick');">onclick有り</a> <a href="a.htm">onclick無し</a> </body> </html> ※環境 Windows2000(sp4)+ie6(sp1)

  • javascriptに詳しい方

    下のスクリプトで見るべきページが二つ以上ある場合どのように記述すればいいのでしょうか? javascriptに詳しい方よろしくお願いいたします。 <html> <head> <script language="JavaScript"> <!-- var isClicked = false; //--> </script> </head> <body> <A href="check.html" onClick="isClicked = true">見るべきページ</a><br> <A href="test.html" onClick="if (!isClicked){ alert('先に見るべきページをクリックしてください'); return false; }">A</a><br> </body> </html>

  • イベントハンドラに処理を追加するには？

    例えばbodyタグのonloadイベントハンドラに JavaScriptを使って処理を追加するにはどうすればよいのでしょうか？ 例） ・rei.htm <html> 　<script language="JavaScript" type="text/javascript"> 　function hoge(){ 　　alert("hogeです"); 　} 　function foo(){ 　　alert("fooです"); 　} 　</script> 　<body onload="hoge();"> 　</body> 　<script language="JavaScript" type="text/javascript"> 　document.body.onload += foo(); 　</script> <html> ※前提条件として、変更可能な箇所はscriptタグ内のみとなります。 「こんなんでいけないかな？」と思って上記のようにやってみたのですがうまくいきませんでした。 （結果はfoo()のみ実行され、hoge()は実行されませんでした。 alertでbody.onloadの中身を確認すると『function anonymous{hoge();}undefined』と表示されるので、なぜfoo()が実行されてhoge()が実行されないのかよくわかりませんが‥） また試しに document.body.onload += foo(); これを以下のように変更してみました。 document.body.onload = foo(); この時は、 ・foo()の実行 　↓ ・javascriptエラー 　↓ ・hoge()の実行 となりました。（これもなぜこうなるのかよくわかりせん） 以上、イベントハンドラに最初から任意に入れられている処理を残しつつ、 さらに処理を加えるにはどうすればよいのかご教示お願いします。

  • 【DOM】HTMLのタグに対してはElementインターフェースが使えない？

    HTMLの「document」はXMLDocumentと完全に見立ててDOMを利用できないのでしょうか？ <html> 　　<style> 　　　　.foo{ 　　　　　　background: #999999; 　　　　} 　　</style> 　　<body> 　　　　<input class="foo" type="text" value="NNNN"/> 　　</body> 　　<script language=JavaScript type=text/javascript> 　　function hoge(){ 　　　　var Nodes; 　　　　Nodes = document.getElementsByTagName("input"); 　　　　alert(Nodes.item(0).nodeName) 　　　　alert(Nodes.item(0).getAttributeNode("class")) 　　　　alert(Nodes.item(0).hasAttributeNode("class")) 　　} 　　hoge(); 　　</script> </html> 上記のようなコードを書いてもアラートに「foo」と表示されません。 また、hasAttributeNodeにおいては全く反応がありません。 DOMのElementインターフェースが使えないとすれば、 JavascriptからclassやonClickのイベントハンドラなど、 属性を動的に変更するにはどうすればいいでしょうか？ 制限事項としてid属性やname属性は使用できません。 IE6での使用です。 以上、よろしくお願いします。

  • <a href="#z" onclick="">

    によって onclickの動作をさせた後 <a name="z"></a>へのジャンプをさせようとしたのですが onclickの動作だけがおこなわれジャンプ動作をしません onclickで非表示の内容を表示させその表示された部分の特定の場所 にジャンプさせたいのです 何かいい方法はあるでしょうか？ よろしくお願いします <a href="#z" onclick="document.getElementById('x').style.display='block';return false"> go to 99 </a> <br/> <br/> <div id="x" style="display:none"> 1<br/> 2<br/> ............. 99<br/> <a name="z"></a> </div>

  • bodyタグの範囲について

    bodyタグの範囲について 質問させてください。 HTMLとJavaScirptで下記のようなソースを書きました。 ～ここから～ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title></title> <script language="JavaScript"> function foo(){ <!-- alert("ほげ"); // --> } </script> </head> <body onClick="foo()"> <input type="text"> </body> </html> ～ここまで～ この場合、ウィンドウの中で<BODY>タグが担当する範囲は以下のどちらでしょうか？ 1. テキストボックスのみ(余白を含まない) 2. 余白を含んだウィンドウ全体 私としては、関数foo()が実行されるのはテキストボックス内をクリックした場合だけなので、1.だと思います。 しかし、<body>タグの属性のbgcolorをつけると、余白全てが着色されるので、2.なのかもしれないと思い混乱しています。 どなたかお知恵をお貸しください。

    • ベストアンサー
    • HTML
  • jQueryのイベントに引数を渡したい

    例えば以下のような既存のJavaScriptのコードをjQueryのイベントで書き直したい場合、関数の引数で渡していた値は、どうやって渡すのでしょうか？ 【html】 <a href="" onclick="func_a('abc'); return false;"></a> 【JavaScript】 faunction func_a(param_a){ alert(param_a); } 以下のようにすれば渡せないことはありませんが、かなり強引な感じがします。 【html】 <a href="" class="abc"></a> 【jQuery】 $(function() { $("a").click( function(){ var param = $(this).attr("class"); alert(param); return false; } ); }); こういう場合はjQeuryであっても、onclick属性で関数を呼び出すのが普通なのでしょうか？ ご存知の方がいらっしゃいましたら教えてください。 よろしくお願い申し上げます。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する