防止单击内部 div 时触发单击处理程序答案

【问题标题】：Prevent a click handler from firing when an inner div is clicked防止单击内部 div 时触发单击处理程序
【发布时间】：2014-04-25 18:17:56
【问题描述】：

我相信我的问题与这个问题相反：Prevent execution of parent event handler

我正在使用 Google Apps 脚本构建 UI。我有一个选择框，在一个更大的容器 div 内。我希望能够在单击父 div 时使用 jQuery 运行动画，但我不希望在单击选择框时运行动画。我尝试使用 stopPropagation，但这没有帮助。当前动画在 div 本身或单击选择下拉菜单时运行：

  var ISDOWN = true;  //global to track whether div is down or up

  $("#outer-container").click(
  function(e) {
    e.stopPropagation();
    var source = $(this).attr('id');
    if (source === "outer-container"){
      if (ISDOWN === true){
        $("#outer-container").animate({top: "8px"});
          ISDOWN = false;
      }
      else {
        $("#outer-container").animate({top: "45px"});
          ISDOWN = true;
      }
    }
  });

【问题讨论】：

如果您希望点击select 不会冒泡到容器中，您可以将点击处理程序附加到select 并调用stopPropagation。

标签： javascript jquery css user-interface google-apps-script

【解决方案1】：

您可以从事件对象的目标属性中检查被点击的元素

if ($(e.target).attr('id') === 'outer-container') {
  if (ISDOWN === true){
    $("#outer-container").animate({top: "8px"});
      ISDOWN = false;
  }
  else {
    $("#outer-container").animate({top: "45px"});
      ISDOWN = true;
  }
}

【讨论】：

做到了。谢谢！