web-dev-qa-db-ja.com

JavaScript onclickイベントを使用したHTMLアンカータグ

Googleを使用すると、アンカータグでonclickイベントを使用していることがわかりました。

Googleヘッダー部分のmoreオプションでは、通常のタグのように見えますが、クリックするとリダイレクトされず、メニューが開きます。通常使用するとき

<a href='more.php' onclick='show_more_menu()'>More >>></a>

通常、show_more_menu()を起動せずに 'more.php'に移動しますが、そのページ自体にメニューを表示しています。 googleのようにする方法

javascripthyperlinkonclickanchor
67
smartkid

Onclick関数がfalseを返す場合、デフォルトのブラウザの動作はキャンセルされます。など：

<a href='http://www.google.com' onclick='return check()'>check</a>

<script type='text/javascript'>

function check()
{
    return false;
}

</script>

いずれにせよ、グーグルがそれを行うかどうかはそれほど重要ではありません。 JavaScript内でonclick関数をバインドすると、よりクリーンになります。この方法で、HTMLを他のコードから分離できます。

99
TJHeuvel

以下のオプションを試すこともできます：

<a href="javascript:show_more_menu();">More >>></a>
46
sun2

私が理解していることから、あなたはリンクがクリックされたときにリダイレクトしたくありません。できるよ ：

<a href='javascript:;' onclick='show_more_menu();'>More ></a>
38
Aditya Manohar

代わりにメニューを表示するには、次のコードを使用します。

function show_more_menu(e) {
  if(!confirm('Do you want to go to: '+e.target.href)) e.preventDefault();;
}
<a href='more.php' onclick="show_more_menu(event)"> More >>> </a>
0
Kamil Kiełczewski