title: Custom right click menu only show on children of div
body: <p><a href="http://jsfiddle.net/TnbYm/" rel="nofollow">http://jsfiddle.net/TnbYm/</a></p>
  
  <p>I'm trying to get my right click menu to only show on children of <code>#canvas</code>. I also want to have it remove when a child is not clicked, but one of the problems are because document is being called as the container document closes it before the action is called.</p>
  
  <p>If anyone can help me with this it'll be greatly appreciated.  </p>
  
  <pre><code>if ( $("#tm").prop('checked') === true ) {
      // Trigger action when the contexmenu is about to be shown
      $("#canvas").find("*").bind("contextmenu", function (event) {
          // Avoid the real one
          event.preventDefault();
          $("#custom-menu").hide(100);
          // Show contextmenu
          if ($("#showcustom-menu").show() === true) {
              $("#custom-menu").hide(100).
              // In the right position (the mouse)
              css({
                  top: event.pageY + "px",
                  left: event.pageX + "px"
              });
          } else {
              $("#custom-menu").show(100).
              // In the right position (the mouse)
              css({
                  top: event.pageY + "px",
                  left: event.pageX + "px"
              });
          }
      });
  
      // If the document is clicked somewhere
      $(document).bind("mousedown", function () {
          $("#custom-menu").hide(100);
      });
  } else {
      $(document).unbind("contextmenu");
  }
  $("#tm").on('change', function() {
      if ( $(this).prop('checked') === true ) {
          // Trigger action when the contexmenu is about to be shown
          $("#canvas").find("*").bind("contextmenu", function (event) {
              // Avoid the real one
              event.preventDefault();
              $("#custom-menu").hide(100);
              // Show contextmenu
              if ($("#custom-menu").show() === true) {
                  $("#custom-menu").hide(100).
                  // In the right position (the mouse)
                  css({
                      top: event.pageY + "px",
                      left: event.pageX + "px"
                  });
              } else {
                  $("#custom-menu").show(100).
                  // In the right position (the mouse)
                  css({
                      top: event.pageY + "px",
                      left: event.pageX + "px"
                  });
              }
          });
  
          // If the document is clicked somewhere
          $(document).bind("mousedown", function () {
              $("#custom-menu").hide(100);
          });
      } else {
          $(document).unbind("contextmenu");
      }
  });
  
  // Menu's button actions
  $("#custom-menu &gt; button").click(function() {
      alert($(this).text() + "was clicked");
  });
  $("#custom-menu &gt; button#duplicate").click(function() {
      // $('#canvas').append($(this).clone());
      $("#custom-menu").hide(100);
  });
  $("#custom-menu &gt; button#remove").click(function() {
      // $(this).remove();
      $("#custom-menu").hide(100);
  });
  $("#custom-menu").find("button#deselect, button#close").click(function() {
      $("#custom-menu").hide(100);
  });
  </code></pre>