如何实现先触发href事件再执行onclick事件？技术求助

首先得明确一个核心关键点：当你点击同时带有href和onclick的<a>标签时，浏览器默认逻辑是先执行onclick里的代码，再触发href的页面跳转。但这里藏着一个致命问题——一旦href触发页面跳转，当前页面的DOM会被完全销毁，你在onclick里给父元素加的open类根本不会生效，因为新页面加载后，原来的元素早就不存在了。

所以你的需求“先执行href再运行onclick”从技术逻辑上是无法实现的（跳转后当前页面的JS环境直接消失），但从你的代码场景来看，你真正想要的应该是：点击下拉菜单子项跳转后，新页面的menu-users菜单保持展开状态，对吧？下面给你两种可行的解决方案：

方案一：通过URL参数标记展开状态 #

这种方法是在跳转URL里附加一个标识参数，新页面加载后读取参数，自动给对应菜单添加open类。

1. 修改子项的href，添加标识参数：

<li id="menu-users" class="dropdown">
  <a href="" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-users"></i>Manage Users<b class="caret"></b></a>
  <ul class="dropdown-menu navmenu-nav">
    <li><a href="manage_a?activeMenu=users">Manage A</a></li>
    <li><a href="manage_b?activeMenu=users">Manage B</a></li>
    <li><a href="manage_c?activeMenu=users">Manage C</a></li>
    <li><a href="manage_d?activeMenu=users">Manage D</a></li>
  </ul>
</li>

2. 在所有页面的JS中添加读取参数并设置菜单状态的代码：

// 页面加载完成后执行
window.addEventListener('DOMContentLoaded', function() {
  // 解析URL参数
  const urlParams = new URLSearchParams(window.location.search);
  const targetMenu = urlParams.get('activeMenu');
  
  if (targetMenu === 'users') {
    const menuElement = document.getElementById("menu-users");
    if (menuElement) {
      menuElement.classList.add("open");
    }
  }
});

方案二：用localStorage记录菜单状态 #

如果不想在URL里暴露参数，可以借助localStorage存储需要展开的菜单ID，新页面读取后再设置状态。

1. 修改子项的onclick逻辑，先存储状态再跳转：

<li id="menu-users" class="dropdown">
  <a href="" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-users"></i>Manage Users<b class="caret"></b></a>
  <ul class="dropdown-menu navmenu-nav">
    <li><a href="manage_a" onclick="markActiveMenu('users')">Manage A</a></li>
    <li><a href="manage_b" onclick="markActiveMenu('users')">Manage B</a></li>
    <li><a href="manage_c" onclick="markActiveMenu('users')">Manage C</a></li>
    <li><a href="manage_d" onclick="markActiveMenu('users')">Manage D</a></li>
  </ul>
</li>

2. 编写存储状态的函数：

function markActiveMenu(menuId) {
  localStorage.setItem('activeMenu', menuId);
  // 不用阻止默认跳转，我们需要先存状态再让页面跳转
}

3. 在所有页面的JS中读取存储并设置菜单：

window.addEventListener('DOMContentLoaded', function() {
  const activeMenu = localStorage.getItem('activeMenu');
  if (activeMenu === 'users') {
    const menuElement = document.getElementById("menu-users");
    if (menuElement) {
      menuElement.classList.add("open");
    }
    // 可选：用完后清除存储，避免其他页面误触发
    localStorage.removeItem('activeMenu');
  }
});

补充：为什么原来的思路行不通？ #

再啰嗦一句：浏览器处理<a>标签的逻辑是固定的——先执行onclick，再处理href跳转。一旦跳转开始，当前页面的所有JS执行都会被中断，新页面加载后，原来的DOM元素已经被完全替换，所以你在onclick里给menu-users加的open类，根本不会在新页面生效。这就是为什么你看似需要“先执行href再触发onclick”，但这个逻辑本身就不符合浏览器的工作机制。

内容的提问来源于stack exchange，提问作者Shashank