コニファ・ロゴ

csstest:【JS】ダミー用のaタグをクリックしたとき、余計な動きをさせないようにする[その1]

aタグでhoverさせ、onClickでイベントは呼び出すようなケースで、よくダミーのリンク href="#" を使います。
これは、Internet Explorerが、href無しではhoverができなかったため広く使われてきました。
<a href="#" onclick="functionName()">イベント発動</a>
しかしこの場合、クリックするといったん画面の上に移動してしまいます。ページの内容が画面内に収まっていれば問題ないのですが、スクロールする必要がある長さの場合、おかしな動きになってしまいます。そこで、このaタグの余計な動きを無効にする方法[その1]です。
→[その2]はこちらから

"return false"を加える

サンプルとして、aタグに href="#" を使って作成した「文字を追加1」ボタンと「文字を追加2」ボタンを用意しました。この2つは、ID名を変えただけで同じ構造です。
HTMLソース
<a id="exsf1" class="kahen-green" href="#" style="float:left;">
<span>文字を追加1</span>
</a>		

「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。

(例1)この後ろに文字を追加   文字を追加1
$(function() {
  $("#exsf1").click(function() {
     $(".exs1").append("<b style='color:red'>【追加部分】</b>");
  });
});
この例では、「文字を追加1」ボタンをクリックすると、文字列の後ろに「【追加部分】」を追加します。実際にクリックすると、画面上に移動してしまいます。スクロールして戻ると、スクリプトは正しく機能していることが分かりますが、動きとしてはおかしなものになってしまいます。

次に、(例2)では、スクリプトに「return false」を追加しています。「文字を追加2」ボタンをクリックすると、今度はhrefの動きをキャンセルして移動せず、その場で動作します。

(例2)この後ろに文字を追加   文字を追加2
$(function() {
  $("#exsf2").click(function() {
     $(".exs2").append("<b style='color:red'>【追加部分】</b>");
     return false
  });
});

 

 

戻るボタン