如何实现仅在点击下拉菜单时触发JavaScript函数，避免选中选项时重复执行

嘿，这个问题我之前也碰到过！本质是事件冒泡在搞鬼：下拉菜单的选项是父容器（你的#_id元素）的子节点，点击选项时，事件会顺着DOM树向上冒泡，最终触发你绑定在父容器上的click事件——这就是为什么不管点下拉展开还是点选项，你的查询函数都会跑两次。

下面给你几个实用的解决方案，根据你的下拉类型选就行：

方案1：判断点击目标是不是下拉容器本身 #

最简单的办法，在click回调里检查触发事件的元素是不是下拉容器本身，而不是它的子选项。只有当点击的是下拉的主体区域时，才执行你的查询逻辑：

$("#_id").click(function(event) {
  // 只有点击事件的目标是下拉容器本身时才执行
  if (event.target === this) {
    // 这里放你的查询操作代码
    console.log("执行下拉展开时的查询");
  }
});

这个方案的好处是不需要修改子元素的代码，只需要在现有回调里加一行判断就行。

方案2：给选项添加事件阻止冒泡 #

如果你的下拉是自定义的（比如用div模拟的下拉菜单），可以直接给所有选项绑定click事件，阻止事件向上冒泡到父容器：

// 给所有下拉选项绑定事件，阻止冒泡
$("#_id .dropdown-option").click(function(event) {
  event.stopPropagation();
  // 这里可以放选项选中后的逻辑，比如赋值、更新UI等
});

// 父容器的click事件只在展开时触发
$("#_id").click(function() {
  // 你的查询操作代码
  console.log("执行下拉展开时的查询");
});

这样点击选项时，事件不会传到父容器，自然就不会重复执行查询函数了。

方案3：针对原生<select>标签的特殊处理 #

如果你的下拉是HTML原生的<select>标签，那其实没必要用click事件，改用focus事件更精准——点击<select>展开时会触发focus，而选择选项时不会再次触发focus（除非你先让它失去焦点再点击）：

$("#_id").focus(function() {
  // 执行查询操作
  console.log("执行下拉展开时的查询");
});

如果需要避免多次聚焦重复执行，可以加个状态标记：

let hasFetched = false;
$("#_id").focus(function() {
  if (!hasFetched) {
    // 执行查询操作
    console.log("仅第一次展开下拉时执行查询");
    hasFetched = true;
  }
});

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