为何mousedown事件会导致click事件无法触发？

问题现象 #

点击Open按钮后显示包含Close按钮的div，控制台打印mousedown和open；但点击Close按钮时，仅打印mousedown，close日志不出现，click事件未触发。

原因分析 #

事件触发顺序为：mousedown → mouseup → click。点击Close按钮时，绑定在document上的mousedown事件先执行，直接隐藏了#qbr容器，导致Close按钮被从DOM中移除，后续的mouseup和click事件无法在该按钮上触发，因此close日志不会输出。

解决方案 #

修改document的mousedown事件，增加判断逻辑：仅当点击的元素不属于#qbr容器内部，且不是Open按钮时，才执行隐藏操作。这样点击Close按钮时，mousedown不会提前隐藏容器，确保click事件能正常触发。

修改后的完整代码：

HTML

<html>
    <input type="button" id="openId" value="Open" />
    <div id="qbr"></div>
</html>

JavaScript

$(document ).on("mousedown",function(e) {
  // 排除qbr内部元素和Open按钮，避免误触发隐藏
  if (!$(e.target).closest('#qbr').length && e.target.id !== 'openId') {
    console.log("mousedown");
    $('#qbr').hide();
  }
});

$("#openId").on("click", function() {
  console.log("open");
  $('#qbr').html("BLAH BLAH <input type=\"button\" id=\"closeId\" value=\"Close\" />");
  $('#qbr').show();
});

$(document).on('click', "#closeId", function(e){
  e.stopPropagation();
  console.log("close");
  $('#qbr').hide();
});

原理说明 #

• $(e.target).closest('#qbr').length用来检查点击的元素是否在#qbr内部（包括元素本身），如果是则返回大于0的数值，条件不成立，不执行隐藏。
• e.target.id !== 'openId'避免点击Open按钮时，mousedown事件隐藏刚要显示的容器。

这样既保留了“点击文档任意处关闭div”的交互逻辑，又能让Close按钮的click事件正常触发。

内容的提问来源于stack exchange，提问作者Link and Zelda