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

Question

我相信我的问题与此相反：阻止执行父事件处理程序

我正在谷歌应用程序脚本中构建一个用户界面。我有一个选择框，在一个更大的容器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;
      }
    }
  });

Answer 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;
  }
}