HTML 錨標簽與 Javascript onclick 事件

Question

在使用 Google 時，我發現他們在錨標簽中使用 onclick 事件。

在 google header 部分的更多選項中，它看起來像一個普通的標簽，但是點擊它並沒有被重定向而是打開了一個菜單。 通常在使用時

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

它通常會在不觸發show_more_menu()的情況下轉到“more.php”，但我已經在該頁面本身中顯示了一個菜單。 怎么做像谷歌？

Answer 1

如果您的 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 與其他代碼分開。

Answer 2

您甚至可以嘗試以下選項：

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

Answer 3

據我了解，您不想在單擊鏈接時重定向。 你可以做 ：

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

Answer 4

使用以下代碼顯示菜單而不是轉到 href 地址

 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>

Answer 5

1) Link to work
<a href="#" onClick={this.setActiveTab}>
      ...View Full List
                    </a>
  setActiveTab = (e) => {
    e.preventDefault();
    console.log(e.target);
}

Answer 6

即使javascript function 返回任何值，也可以防止默認操作的另一種解決方案。

<a href="www.any-website.com" onclick='functionToRun();return false;'>