jQuery卡片答题系统点击事件同时触发的解决方法咨询

这个问题其实是DOM事件冒泡机制在搞鬼！当你点击#card1元素时，事件会从这个元素本身开始，沿着DOM树向上逐级触发父元素的点击事件，直到最顶层的body，所以两个点击事件会先后执行。下面给你两种简单有效的解决办法：

方法一：在卡片点击事件中阻止冒泡 #

这是最直接的方案，在卡片的点击处理函数里调用event.stopPropagation()，就能切断事件的冒泡路径，避免触发上层的body点击事件：

let clicked = false; 
$(document).on("click", "#card1", function(event) { 
  clicked = true; 
  // 这里写你的答案校验逻辑...
  
  // 阻止事件继续向上传播
  event.stopPropagation(); 
}); 

$(document).on("click", "body", function() { 
  if (clicked === true) { 
    quiz.nextQuestion(); 
    clicked = false; 
  } 
});

这样点击卡片时，事件只会停留在卡片元素本身，不会触发body的点击事件，完美解决冲突。

方法二：在body点击事件中过滤目标元素 #

如果你不想完全阻止事件冒泡（比如卡片的父元素还有其他需要触发的事件），可以在body的点击事件里先判断点击的目标是不是卡片相关元素，是的话就跳过后续逻辑：

let clicked = false; 
$(document).on("click", "#card1", function() { 
  clicked = true; 
  // 这里写你的答案校验逻辑...
}); 

$(document).on("click", "body", function(event) { 
  // 检查点击的目标是否是#card1或者它的子元素
  if ($(event.target).closest("#card1").length) {
    return; // 是则直接返回，不执行下一题逻辑
  }
  
  if (clicked === true) { 
    quiz.nextQuestion(); 
    clicked = false; 
  } 
});

closest("#card1")会从点击的目标元素开始向上查找匹配的元素，只要找到就说明点击的是卡片区域，直接跳过body事件的核心逻辑。

两种方法都能解决你的问题，推荐用第一种，逻辑更简洁直接，完全贴合你的需求场景。

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