Right click on SVG - solution

by sachid

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<svg id="canvas" class="canvas" width="1800" height="500">
  <rect class="ddd" id="ddd" x="0" y="0" width="300" height="200" fill="#D3DA7B" stroke="black"></rect>


</svg>


<ul class='custom-menu' id="container-menu">
  <li data-action="load">Load Schema</li>
  <li data-action="clear">Clear container</li>
</ul>
<input type="file" class="file-select input" id="input-file-select" name="input-select[]" accept="application/json" />

CSS

.custom-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;
  list-style: none;
  padding:0;
  margin:0;
}

.custom-menu li {
  padding: 8px 12px;
  cursor: pointer;
}

.custom-menu li:hover {
  background-color: #DEF;
}

input {
  display: none;
}

JavaScript

$("#ddd").bind("contextmenu", function(event) {

     // Avoid the real one
     event.preventDefault();

     // Show contextmenu
     $("#container-menu").finish().toggle(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(e) {

     // If the clicked element is not the menu
     if (!$(e.target).parents(".custom-menu").length > 0) {

       // Hide it
       $(".custom-menu").hide(100);
     }
   });


   // If the menu element is clicked
   $("#container-menu li").click(function() {
     // This is the triggered action name
     switch ($(this).attr("data-action")) {

       // A case for each action. Your actions here
       case "load":
         $(".file-select").trigger("click");
         break;
       case "clear":
         alert("second");
         break;
     }

     // Hide it AFTER the action was triggered
     $(".custom-menu").hide(100);
   });