Javascriptonclickイベントを含むHTMLアンカータグ

86

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

でより多くのGoogleのヘッダ部内のオプションは、通常のAタグのように見えますが、それはリダイレクトが、メニューを開けませんonclicking。通常使用する場合

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

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

— smartkid
ソース

116

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

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

<script type='text/javascript'>

function check()
{
    return false;
}

</script>

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

— TJHeuvel
ソース

3

1.より確実にするには、href = "＃"で＃を使用し、JavaScript内で必要なことを行います。＃hrefでそのリンクをクリックしても安全です。ページはURLを残す/再読み込みします。

— Bimal Poudel 2015年

4

HTML5のルールhref="#"では、ページの上部に移動することになっていることが明示的に示されているため、上記のアドバイスには注意してください。hrefコンテンツなしで属性を追加するだけで、クリック動作を取得できます。Assinging #（むしろ単一ページ、100％の高さのアプリよりも）実際のページのURLなどは、一般的に悪い考えです。

— Mike'Pomax 'Kamermans18年

54

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

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

— sun2
ソース

1

警告：関数が明示的な値（例：return null;、ただし、ではないreturn;）を返す場合、FireFoxなどの一部のブラウザーで意図しない結果が発生します。このページでは、すべてのコンテンツが文字列形式の戻り値に置き換えられます（例:) [object Object]。

— rannmann 2016年

45

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

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

— アディティアマノハール
ソース

3

これは、hrefがどこにもポイントしないようにする場合に役立ちます。

— kbpontius 2017年

かっこいいし、動作しますが、jqueryはエラー「エラー：構文エラー、認識されない式：javascript :;」をスローします。

— TheOddCoder 2017年

jQueryバージョン1.10.2を使用していますが、@ TheOddCoderで発生した構文エラーが発生しません。

— マイクフィンチ

1

次のコードを使用してメニューを表示し、代わりにhrefaddresに移動します

function show_more_menu(e) {
  if( !confirm(`Go to ${e.target.href} ?`) ) e.preventDefault();
}

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

スニペットを展開

— KamilKiełczewski
ソース