jsをaタグのonClickにスマートに書く方法は?

<a href="javascript:void(0)" onClick="aaaa();return false">あああああ</a>
と書いているのですが、もっとスマートに書けないものでしょうか?
jQueryを使っています。

回答の条件
  • 1人2回まで
  • 登録:2010/03/06 22:50:58
  • 終了:2010/03/13 22:55:03

回答(4件)

id:Km1967 No.1

Km1967回答回数224ベストアンサー獲得回数352010/03/06 23:08:15

ポイント27pt

anchorタグを使う限りは無理でしょうね。

buttonにするとかspanにするなどの代替措置を取るくらいでしょう。

SEO的にはanchorのほうがいいかもしれませんけど、

スクリプトに飛ばす時点でどうかと思いますし好みの問題でしょうね。

buttonだと基本的にはformが必要になってしまうので

spanにclassつけといてanchorみたいなstyleに整えれば良いでしょう。

<span class="anchor" onClick="aaaa();">あああああ</span>

URLは適当です。

http://copicopi.com/onclickfont.html

http://www.red.oit-net.jp/tatsuya/java/button.htm

id:dingding

なるほど。やはりそうですか。見た目がリンクでないならそれもありですね。リンクならそれっぽくわざわざするのはナンセンスかなと思いますので、今のままでいきます。

ちなみにaタグでhrefを無しにしたら行けるのでは、と思いましたが、hrefがないとリンクにならないんですね。

2010/03/06 23:47:42
id:Cherenkov No.2

Cherenkov回答回数1503ベストアンサー獲得回数4932010/03/07 00:48:26

ポイント27pt

clickイベントをbindしてpreventDefault()でページ遷移させないサンプル。

http://jsfiddle.net/afV8J/


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
  $('#hoge').click(function(e){
    e.preventDefault();
    alert("iiiiii");
  });
});
</script>
</head>
<body>
<a href="" id="hoge">あああああ</a>
</body>
</html>
id:dingding

ありがとうございます。こういう手もあるんですね。

2010/03/07 01:45:40
id:kebo987654 No.3

kebo987654回答回数38ベストアンサー獲得回数102010/03/07 09:33:36

ポイント27pt

onclick=""に書いていることをhrefの中に入れてみる。なんてのはどうですか?

<a href="javascript:alert( 'href' );void( 0 );">あいうえお!!!</a>
                                    ~~~~~~~~~

void( 0 );はundefinedを返すために必要ですので注意してください。

undefined以外を返すと、

<a href="javascript:null;">あいうえお!!!</a>
                    ~~~~

このサンプルでは真っ白のページに「null」と表示されてしまいます。

id:dingding

なるほど、これで動作すればそれもありですね。

2010/03/07 16:03:38
id:a532 No.4

a532回答回数31ベストアンサー獲得回数22010/03/07 13:08:39

ポイント9pt

ジャンプしないのだから、

<style type="text/css"></p> <p><!--</p> <p>a{</p> <p>color:#0000ff;</p> <p>text-decoration:underline;</p> <p>cursor:pointer;</p> <p>}</p> <p>a:hover{</p> <p>color:#ff0000;</p> <p>}</p> <p>a:active{</p> <p>color:#000000;</p> <p>}</p> <p>--></p> <p></style>

</head>

<body>

あああああ


こういうことではないのでしょうか。

hover等はこちらで適当に装飾しました。

id:dingding

装飾の仕方はわかっていますが、余計に面倒になるので意味がないなと。

2010/03/07 16:04:41
  • id:Cherenkov
    clickイベントをbindするのはダメでonclickを使わないといけないんですか?
  • id:Km1967
    id:Cherenkov さん
    jQuery使ってるのをすっかり忘れて回答してました。
    回答欄のほうになさっては?
  • id:dingding
    >clickイベントをbindするのはダメでonclickを使わないといけないんですか?
    そんなことはありません。onClickでなくても同じような動作になれば構いません。

    Cherenkovさん、Km1967さん、よければ回答欄に投稿をお願いします。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません