Prevent a click handler from firing when an inner div is clicked

Question

I believe my question is the reverse of this one: Prevent execution of parent event handler

I'm building a UI in Google Apps Script. I have a select box, inside a larger container div. I want to be able to run an animation using jQuery when the parent div is clicked, but I don't want the animation to run when the select box is clicked. I tried using stopPropagation, but that's not helping. Currently the animation runs when either the div itself, or the select drop-down is clicked:

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

If you want a click on the `select` to not bubble up to the container, you would attach a click handler to the `select` and call `stopPropagation`. — Jason P, Apr 25 '14 at 18:21

score 0 · Accepted Answer · answered Apr 25 '14 at 18:47

You can check the element being clicked from the target property on the event object

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

Prevent a click handler from firing when an inner div is clicked

1 Answers1