Right Click Menu-CodePudding

I want to be able to right click and have it pull up a menu currently it pulls up the menu but I cannot interact with it without it closing. But this code closes it with any click inside or outside of it. How do I make it so I can click inside I can navigate menus, but if I click outside of it it closes? Here's the code I have:

<style>
#contextMenuContainer {
 display: none;
 position: fixed;
 border: 1px solid;
 border-right: 1px solid black;
 border-left: 1px solid white;
 border-top: 1px solid white;
 border-bottom: 1px solid black;
 padding-top: 5px;
 background: #c0c0c0;
 width:150px;
 z-index: 100;
 }
 #contextMenuContainer:after {
 content: '';
 top: -0px;
 position: absolute;
 border: 1px solid;
 border-right: 1px solid gray;
 border-left: 1px solid white;
 border-top: 1px solid white;
 border-bottom: 1px solid gray;
 padding-left: 148px;
 padding-top: 155px;
 }
#contextMenuContainer #contextMenu {
list-style: none;
 padding: 0px;
 font-size: 14px;
 font-family: notbold;
 }
#contextMenuContainer #contextMenu li {
font-size: 14px;
 cursor: pointer;
 padding-top: 0px;
 padding-left: 30px;
 padding-bottom: 5px;
 text-align: relative;
 }
 #divider {
 position: relative;
 border: 1px solid;
 border-right: transparent;
 border-left: transparent;
 border-top: 1px solid gray;
 border-bottom: 1px solid white;
 padding: 0px 0px;
 }
 #clear_divider {
 position: relative;
 border: 1px solid;
 border-right: transparent;
 border-left: transparent;
 border-top: transparent;
 border-bottom: transparent;
 padding: 3px 0px;
 }
</style>

<div id="contextMenuContainer" >                         
    <div id="contextMenu">    
      <li style="color:gray" onclick="ms(true)">Arrange Icons&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;►</li>
      <li style="color:gray">Lin<u>e</u> up Icons</li>
      <div id="divider"></div>
      <div id="clear_divider"></div>
      <li style="color:gray"><u>P</u>aste</li>
      <li style="color:gray">Paste <u>S</u>hortcut</li>
      <div id="divider"></div>
      <div id="clear_divider"></div>
      <li style="color:gray">Ne<u>w</u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;►</li>
      <div id="divider"></div>
      <div id="clear_divider"></div>
      <li>P<u>r</u>operties</li>
    </div>
  </div>

    <script>
$(function() {
  var doubleClicked = false;
  $(document).on("contextmenu", function (e) {
   if(doubleClicked == false) {
    e.preventDefault(); // To prevent the default context menu.
    var windowHeight = $(window).height()/2;
    var windowWidth = $(window).width()/2;
    //When user click on bottom-left part of window
    if(e.clientY > windowHeight && e.clientX <= windowWidth) {
      $("#contextMenuContainer").css("left", e.clientX);
      $("#contextMenuContainer").css("bottom", $(window).height()-e.clientY);
      $("#contextMenuContainer").css("right", "auto");
      $("#contextMenuContainer").css("top", "auto");
    } else if(e.clientY > windowHeight && e.clientX > windowWidth) {
      //When user click on bottom-right part of window
      $("#contextMenuContainer").css("right", $(window).width()-e.clientX);
      $("#contextMenuContainer").css("bottom", $(window).height()-e.clientY);
      $("#contextMenuContainer").css("left", "auto");
      $("#contextMenuContainer").css("top", "auto");
    } else if(e.clientY <= windowHeight && e.clientX <= windowWidth) {
      //When user click on top-left part of window
      $("#contextMenuContainer").css("left", e.clientX);
      $("#contextMenuContainer").css("top", e.clientY);
      $("#contextMenuContainer").css("right", "auto");
      $("#contextMenuContainer").css("bottom", "auto");
    } else {
       //When user click on top-right part of window
      $("#contextMenuContainer").css("right", $(window).width()-e.clientX);
      $("#contextMenuContainer").css("top", e.clientY);
      $("#contextMenuContainer").css("left", "auto");
      $("#contextMenuContainer").css("bottom", "auto");
    }
    $("#contextMenuContainer").fadeIn(0, FocusContextOut());
      doubleClicked = false;
    } else {
      e.preventDefault();
      doubleClicked = true;
      $("#contextMenuContainer").fadeOut(0);
    }
  });
  function FocusContextOut() {
    $(document).on("click", function () {
      doubleClicked = false; 
      $("#contextMenuContainer").fadeOut(0);
      $(document).off("click");           
    });
  }
});
    </script>

I've tried messing around with it but I can't figure it out. Here's a JSfiddle: JSFIDDLEIt's probably an easy solution, Thanks.

CodePudding user response：

inside your $(document).on("click", function () { you can check if the target click is from the context menu or any of it's children like so:

function isContextMenu(element) {
    if($(element).closest('#contextMenuContainer').length >= 1) {
       return true;
    }
    return false;
}
  
function FocusContextOut() {
    $(document).on("click", function (event) {
        doubleClicked = false; 
        if(false === isContextMenu(event.target)) { // see this
            $("#contextMenuContainer").fadeOut(0);
      }
      
        $(document).off("click");           
    });
}

$(function() {
  var doubleClicked = false;
  $(document).on("contextmenu", function (e) {
   if(doubleClicked == false) {
    e.preventDefault(); // To prevent the default context menu.
    var windowHeight = $(window).height()/2;
    var windowWidth = $(window).width()/2;
    //When user click on bottom-left part of window
    if(e.clientY > windowHeight && e.clientX <= windowWidth) {
      $("#contextMenuContainer").css("left", e.clientX);
      $("#contextMenuContainer").css("bottom", $(window).height()-e.clientY);
      $("#contextMenuContainer").css("right", "auto");
      $("#contextMenuContainer").css("top", "auto");
    } else if(e.clientY > windowHeight && e.clientX > windowWidth) {
      //When user click on bottom-right part of window
      $("#contextMenuContainer").css("right", $(window).width()-e.clientX);
      $("#contextMenuContainer").css("bottom", $(window).height()-e.clientY);
      $("#contextMenuContainer").css("left", "auto");
      $("#contextMenuContainer").css("top", "auto");
    } else if(e.clientY <= windowHeight && e.clientX <= windowWidth) {
      //When user click on top-left part of window
      $("#contextMenuContainer").css("left", e.clientX);
      $("#contextMenuContainer").css("top", e.clientY);
      $("#contextMenuContainer").css("right", "auto");
      $("#contextMenuContainer").css("bottom", "auto");
    } else {
       //When user click on top-right part of window
      $("#contextMenuContainer").css("right", $(window).width()-e.clientX);
      $("#contextMenuContainer").css("top", e.clientY);
      $("#contextMenuContainer").css("left", "auto");
      $("#contextMenuContainer").css("bottom", "auto");
    }
    $("#contextMenuContainer").fadeIn(0, FocusContextOut());
      doubleClicked = false;
    } else {
      e.preventDefault();
      doubleClicked = true;
      $("#contextMenuContainer").fadeOut(0);
    }
  });
  
  function isContextMenu(element) {
      if($(element).closest('#contextMenuContainer').length >= 1) {
         return true;
      }
      return false;
  }
  
  function FocusContextOut() {
    $(document).on("click", function (event) {
      doubleClicked = false; 
      if(false === isContextMenu(event.target)) {
          $("#contextMenuContainer").fadeOut(0);
      }
      
      $(document).off("click");           
    });
  }
});

#contextMenuContainer {
 display: none;
 position: fixed;
 border: 1px solid;
 border-right: 1px solid black;
 border-left: 1px solid white;
 border-top: 1px solid white;
 border-bottom: 1px solid black;
 padding-top: 5px;
 background: #c0c0c0;
 width:150px;
 z-index: 100;
 }
 #contextMenuContainer:after {
 content: '';
 top: -0px;
 position: absolute;
 border: 1px solid;
 border-right: 1px solid gray;
 border-left: 1px solid white;
 border-top: 1px solid white;
 border-bottom: 1px solid gray;
 padding-left: 148px;
 padding-top: 155px;
 }
#contextMenuContainer #contextMenu {
list-style: none;
 padding: 0px;
 font-size: 14px;
 font-family: notbold;
 }
#contextMenuContainer #contextMenu li {
font-size: 14px;
 cursor: pointer;
 padding-top: 0px;
 padding-left: 30px;
 padding-bottom: 5px;
 text-align: relative;
 }
 #divider {
 position: relative;
 border: 1px solid;
 border-right: transparent;
 border-left: transparent;
 border-top: 1px solid gray;
 border-bottom: 1px solid white;
 padding: 0px 0px;
 }
 #clear_divider {
 position: relative;
 border: 1px solid;
 border-right: transparent;
 border-left: transparent;
 border-top: transparent;
 border-bottom: transparent;
 padding: 3px 0px;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="contextMenuContainer" >                         
    <div id="contextMenu">    
      <li style="color:gray" onclick="ms(true)">Arrange Icons&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;►</li>
      <li style="color:gray">Lin<u>e</u> up Icons</li>
      <div id="divider"></div>
      <div id="clear_divider"></div>
      <li style="color:gray"><u>P</u>aste</li>
      <li style="color:gray">Paste <u>S</u>hortcut</li>
      <div id="divider"></div>
      <div id="clear_divider"></div>
      <li style="color:gray">Ne<u>w</u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;►</li>
      <div id="divider"></div>
      <div id="clear_divider"></div>
      <li>P<u>r</u>operties</li>
    </div>
  </div>