1

I have a contextmenu over boxes e.g. for Copy/Cut/Paste that is working as expected with Chrome and IE on Windows, but on Safari (OSX) it is not. The contextmenu appears, but as soon as I let go of the mouseclicker (whether over the window or not) it is hidden and no click on its <li>s are caught.

I suspect that what is happening is the initial click (of the control-click?) of the contextmenu event is getting propagated to the $(document) and then closing it. Here are relevent parts of the code. Thanks for any help!

<select class="mySelectionsSelects"></select>
<select class="mySelectionsSelects"></select>

<ul id="custom-menu" style="top: 194px; left: 884px; display: none;">
  <li id="customMenuCopy" data-action="copy">Copy</li>
  <li id="customMenuCut" data-action="cut">Cut</li>
  <li id="customMenuPaste" data-action="paste">Paste</li>
</ul>

event handling:

jQuery(document).ready(function ($) {
 $('.mySelectionsSelects').on("contextmenu", function(event) { 
   event.preventDefault(); event.stopPropagation();
   console.log('building context menu');
   $("#custom-menu").css({"top": event.pageY + "px", "left": event.pageX +    "px"});
   $("#custom-menu").show();
   console.log('added context menu at top: ' + event.pageY + '/left: ' +    event.pageX);
 });

// catch click anywhere else, to close it.
$(document).on("click", function(event) {
  console.log('caught click on document, hiding custom-menu');
  $("#custom-menu").hide();
});

$("#custom-menu li").on("click", function(event) {
  event.preventDefault(); event.stopPropagation();
  console.log('caught click in li'); 
  // This is the triggered action name
  switch($(this).attr("data-action")) {
    case "copy": editButton.doCopy(); break;
    case "cut": editButton.doCut(); break;
    case "paste": editButton.doPaste(); break;
  };
  // Hide it AFTER the action was triggered
  $("#custom-menu").hide(100);    
 });
});

css:

#custom-menu {
    display: none;
    z-index: 1000;
    position: absolute;
    overflow: hidden;
    border: 1px solid #CCC;
    white-space: nowrap;
    font-family: "Open Sans", sans-serif;
    font-size: 10pt;
    background: #FFF;
    color: #333;
    border-radius: 5px;
    padding: 0;
}

#custom-menu li {
    padding: 6px 9px;
    cursor: pointer;
    list-style-type: none;
    transition: all .3s ease;
    user-select: none;
}

#custom-menu li:hover {
  background-color: #DEF;
}
user2887492
  • 33
  • 5

1 Answers1

1

Your suspicion is correct! Add this line at the beginning of your context menu-closing function:

if (event.ctrlKey) return;

Source: https://stackoverflow.com/a/27973894/7503963 (I didn't have the rep to just comment.)

tagurit
  • 494
  • 5
  • 13