Question

If I have a jQuery .click() event firing for both “body” and a “div”, how would I get it to only execute for the div and not the body when the div is clicked? Basically, I’m making my own context menu and I want clicking anywhere outside the element (in this case, “div.button”) to close the menu.

Rudimentary example:

  $("body").click(function(event){
    if($("div.menu").is(":visible")){
      $("div.menu").hide();
    }
  });

  $("div.button").click(function(event){
    $("div.menu").show();
  });

As you can guess, the $(“body”).click() prevents/hides the menu from even showing.

A little guidance would be much appreciated. Thanks for reading!

Answer 1

http://api.jquery.com/event.stopPropagation/

event.stopPropagation()