使用jQuery点击列表项出现多个弹窗结果的问题求助

嘿，这个问题我太熟了——典型的事件冒泡在搞鬼！当你点击某个元素时，浏览器会把这个点击事件沿着DOM树向上传递，触发所有父元素上绑定的同类型事件，所以才会依次弹出父级的ID。不用改菜单结构，有两种简单的解决办法：

方法一：阻止事件冒泡（最直接） #

如果你的每个带ID的元素都绑定了点击事件，只需要在事件处理函数里阻止事件向上传播，这样就只会触发当前点击元素的事件：

$('[id]').click(function(event) {
  // 阻止事件冒泡到父元素
  event.stopPropagation();
  // 弹出当前元素的ID
  alert($(this).attr('id'));
});

注意：如果你的场景不需要阻止默认行为（比如链接跳转），用event.stopPropagation()就够了；如果需要同时阻止默认行为，可以用return false（它相当于同时调用stopPropagation()和preventDefault()）。

方法二：精准定位实际点击的元素（适合事件委托场景） #

如果你的点击事件是通过事件委托绑定在父容器上的（比如只给最外层菜单绑了一次事件），可以通过event.target获取用户实际点击的元素，直接提取它的ID：

$('#你的外层容器ID').click(function(event) {
  // 获取实际被点击的元素
  const clickedElement = $(event.target);
  // 检查该元素是否有ID，有的话直接弹出
  if (clickedElement.attr('id')) {
    alert(clickedElement.attr('id'));
    // 同样可以阻止冒泡避免后续干扰
    event.stopPropagation();
  }
});

这种方式不用给每个子元素单独绑事件，性能更优，也完全不需要修改菜单结构。

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