jQuery排除子元素点击：点击mfp-content时不显示聊天框

你的问题核心是事件冒泡：点击.mfp-content时，事件会向上传递到父元素.mfp-container，触发了原本只期望点击容器空白区域才执行的显示聊天框逻辑。之前的代码未处理冒泡问题，导致点击购物车内容区也会误触发聊天框显示。

下面是两种有效的解决方法：

方法1：阻止.mfp-content的事件冒泡 #

直接在.mfp-content的点击事件中阻止事件向上冒泡，这样点击内容区时就不会触发父容器的点击逻辑：

isChatHidden = false;

$(document).on("ajaxComplete", function() {
  $(".icon-shopping-cart").click(function() {
    $(".chaport-container").hide();
    isChatHidden = true;
  });

  // 关闭按钮点击时显示聊天框
  $(".mfp-close").click(function() {
    if (isChatHidden) {
      $(".chaport-container").show();
      isChatHidden = false;
    }
  });

  // 容器空白区域点击时显示聊天框
  $(".mfp-container").click(function() {
    if (isChatHidden) {
      $(".chaport-container").show();
      isChatHidden = false;
    }
  });

  // 阻止内容区的事件冒泡到父容器
  $(".mfp-content").click(function(e) {
    e.stopPropagation();
  });
});

方法2：在.mfp-container点击事件中判断点击目标 #

在容器的点击事件里，检查点击的元素是否属于.mfp-content（包括其子元素），如果是则跳过显示逻辑：

isChatHidden = false;

$(document).on("ajaxComplete", function() {
  $(".icon-shopping-cart").click(function() {
    $(".chaport-container").hide();
    isChatHidden = true;
  });

  $(".mfp-close, .mfp-container").click(function(e) {
    if (isChatHidden) {
      // 判断点击目标是否是.mfp-content或其子元素
      if (!$(e.target).closest(".mfp-content").length) {
        $(".chaport-container").show();
        isChatHidden = false;
      }
    }
  });
});

之前代码无效的原因 #

• 代码片段1中的.mfp-container:not(.mfp-content)选择器逻辑错误：.mfp-container和.mfp-content是父子元素，该选择器依然会选中所有.mfp-container，无法区分点击区域。
• 代码片段2和3中的!$(".mfp-content").length是检查页面是否存在该元素，而非判断当前点击的是不是该元素，逻辑完全不成立。

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