javascript - 使用#（使用javascript或jquery）动态地将return false添加到所有锚点

Question

我在 HTML 中有以下菜单：

在这一点上，我已经在 HTML 中硬编码了onclick="return false"右边（见下文）。我读过这是不好的做法。我想知道如何return false使用 jquery 和/或 javascript 添加（或 e.preventdefault）到所有具有 # 的 href 的锚点。

<div id="bar" >
<label id="toggle-label" for="toggle-1">Menu</label>
<input type="checkbox" id="toggle-1">
    <ul class="menu">
            <li><a href="/">Home</a></li>
            <li><a href="#" onclick="return false;">Item with sub</a>
                <ul>
                    <li><a href="https://google.com" target="_blank">Sub 1.1</a></li>
                      <li><a href="/something">Sub 1.2</a></li>
                </ul>
            </li>

            <li><a href="#" onclick="return false;">Item with sub-sub</a>
                <ul>
                    <li><a href="/something">service-1</a></li>
                    <li><a href="#" onclick="return false;">Item with sub</a>
                        <ul>
                            <li><a href="/something">sub sub 1</a></li>
                            <li><a href="/something">sub sub 2</a></li>
                            <li><a href="/something">sub sub 3</a></li>
                        </ul>
                    </li>
                    <li><a href="/electrical">Electrical</a></li>
                </ul>
            </li>

                <li><a href="/pricing">Pricing</a></li>
                <li><a href="/contact">Contact Us</a></li>

    </ul>

</div>

标签： javascriptjqueryhtml

Answer 1

href='#'使用 jQuery 选择器选择所有锚点，然后onclick为它们添加一个侦听器。

var anchors = $("a[href='#']")
anchors.on("click", (ev) => {
  ev.preventDefault(); 
  console.clear()
  console.log("anchor clicked");
  return false
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bar" >
<label id="toggle-label" for="toggle-1">Menu</label>
<input type="checkbox" id="toggle-1">
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Item with sub</a>
        <ul>
          <li><a href="https://google.com" target="_blank">Sub 1.1</a></li>
          <li><a href="#">Sub 1.2</a></li>
        </ul>
    </li>
    <li><a href="#">Item with sub-sub</a>
      <ul>
        <li><a href="#">service-1</a></li>
        <li><a href="#">Item with sub</a>
          <ul>
            <li><a href="#">sub sub 1</a></li>
            <li><a href="#">sub sub 2</a></li>
            <li><a href="#">sub sub 3</a></li>
          </ul>
        </li>
        <li><a href="#">Electrical</a></li>
      </ul>
    </li>
    <li><a href="#">Pricing</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</div>