stopPropagation()报undefined错误 下拉菜单点击显隐异常排查

控制台抛出的Cannot read properties of undefined (reading 'stopPropagation')错误，以及交互不符合预期，核心是三个问题：

• 按钮用内联onclick绑定事件时，没有把事件对象传入处理函数：你写的onclick="btnCrypto()"调用时没传参，函数内接收到的e是undefined，自然调用不了stopPropagation()方法
• 全局的body点击事件没有做容错：初始状态下iconListBoxBody变量未赋值，如果页面加载后还没点过按钮就触发body点击，直接访问undefined的classList属性也会报错
• 缺少下拉菜单内部的冒泡阻止：就算事件传参正常，点击下拉菜单里的选项时，点击事件会冒泡到body，直接触发关闭逻辑，根本选不到菜单内的内容

HTML部分 #

只需要修改按钮的onclick绑定，传入内置的event对象即可，其余结构不变：

<div class="iconListBox">
  <div class="iconListBoxHeader">
    <img src="assets/images/coin1.png" alt="">
    <input type="text" class="form-control" value="BTC" />
    <!-- 修改为传入event事件对象 -->
    <button class="btn-crypto btn btn-primary" onclick="btnCrypto(event)"><i class="fa fa-chevron-down"></i>click</button>
  </div>
  <div class="iconListBoxBody" id="iconListBoxBody">
    <ul class="iconListBoxBodyList">
      <li>
        <img src="assets/images/coin1.png" alt="">
        <span class="coinText">BTC</span>
      </li>
      <li>
        <img src="assets/images/coin2.png" alt="">
        <span class="coinText">ETH</span>
      </li>
    </ul>
  </div>
</div>

JS部分 #

补全容错、DOM初始化获取、菜单内部冒泡阻止逻辑：

// 页面加载时就获取下拉菜单DOM，不用每次点击都重新查询
const iconListBoxBody = document.getElementById("iconListBoxBody");

function btnCrypto(e) {
  // 阻止按钮点击冒泡到body，避免触发body的关闭逻辑
  e.stopPropagation();
  iconListBoxBody.classList.toggle("active");
}

// 点击下拉菜单内部区域时阻止冒泡，防止点菜单内容直接被关闭
iconListBoxBody.addEventListener("click", function(e) {
  e.stopPropagation();
})

document.body.addEventListener("click", function() {
  // 加判断避免元素不存在时报错
  if (iconListBoxBody) {
    iconListBoxBody.classList.remove("active");
  }
});

CSS部分 #

原有样式逻辑完全正常，不需要修改：

.iconListBoxBody {
  display: none;
}

.iconListBoxBody.active {
  display: block;
}

修复后效果：点击按钮正常切换下拉菜单显隐，点击菜单内部选项不会误触发关闭，点击页面任意非菜单区域自动隐藏下拉菜单，控制台无任何报错。

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