title: jQuery right click function block normal menu
body: <p>I have trying to build my own right click menu I will bind to stuff like as a admin menu for admins, but when I do it its block my normal browser menu when you right click on your mouse, I can't find out of why.</p>
  
  <p><strong>Javascript code:</strong></p>
  
  <pre><code>$.admin_panel = {
  menu: {
      product: function(product_uuid) {
          console.log('product');
  
          $(document.createElement('ul'))
          .attr({
              'id' : 'admin_panel-product-'+ product_uuid
          })
          .addClass('admin_panel_menu')
          .append(
              $(document.createElement('li'))
              .append(
                  $(document.createElement('a'))
                  .attr({
                      'href' : '{backend url}/'+ product_uuid,
                      'target' : '_Blank'
                  })
                  .html('Edit via backend')
              )
          )
          .appendTo('body');
  
          $.admin_panel.tricker.bindEvent('#admin_panel-product-'+ product_uuid);
          $.admin_panel.tricker.mousedownEvent('#admin_panel-product-'+ product_uuid);
          $.admin_panel.tricker.clickEvent('#admin_panel-product-'+ product_uuid);
      }
  },
  
  tricker: {
      bindEvent: function(menu_id) {
          console.log('bindEvent');
  
          $('.admin_panel').bind('contextmenu', function (event) {
              //  event.preventDefault();
  
               $(menu_id).finish().toggle(100).
  
               css({
                       top: event.pageY + "px",
                       left: event.pageX + "px"
               });
          });
      },
  
      mousedownEvent: function(menu_id) {
          console.log('mousedownEvent');
  
          $(document).bind("mousedown", function (e) {
              if (!$(e.target).parents(menu_id).length &gt; 0) {
                  $(menu_id).hide(100);
              }
          });
      },
  
      clickEvent: function(menu_id) {
          console.log('clickEvent');
  
          $(menu_id +" li").click(function(){
          $(menu_id).hide(100);
        });
      }
  },
  
  run: function() {
      console.log('Admin panel run! :)');
  
      $.each($('.admin_panel'), function(index, value) {
          switch(true) {
              case $(value).hasClass('admin_panel_product'):
                  $.admin_panel.menu.product($(value).data('product-uuid'));
                  break;
          }
      });
      }
  };
  </code></pre>
  
  <p><strong>HTML Code:</strong></p>
  
  <pre><code>&lt;h1 class="h2 admin_panel admin_panel_product admin_panel_obj_b6672e48-a99f-49f4-a46b-8197686c8935" data-product-uuid="b6672e48-a99f-49f4-a46b-8197686c8935"&gt;product title here&lt;/h1&gt;
  </code></pre>
  
  <p><strong>CSS by SCSS syntax</strong></p>
  
  <pre><code>.admin_panel_menu {
      display: none;
      z-index: 1000;
      position: absolute;
      overflow: hidden;
      border: 1px solid #CCC;
      white-space: nowrap;
      font-family: sans-serif;
      background: #FFF;
      color: #333;
      border-radius: 5px;
  
          list-style: none;
          padding: 0;
          margin: 0;
  
          li {
              padding: 6px 12px;
              cursor: pointer;
                  font-size: 12px;
  
                  &amp;:hover {
                      background-color: #DEF;
                  }
          }
  }
  </code></pre>
  
  <p><strong>Run the code</strong></p>
  
  <pre><code>$.admin_panel.run();
  </code></pre>
  
  <p>Its shut only work when i click on this admin_panel area, not orther place.</p>