Safai/OSX 上的上下文菜单被打开的点击关闭

Question

我在方框上有一个上下文菜单，例如Copy/Cut/Paste 在 Chrome 和 Windows 上按预期工作，但在 Safari (OSX) 上却不是。上下文菜单出现，但只要我松开鼠标点击器（无论是否在 window 上方），它就会被隐藏，并且不会捕获其 <li> 上的点击。

我怀疑上下文菜单事件的初始点击（control-click？）正在传播到 $(document) 然后关闭它。这是代码的相关部分。感谢您的帮助！

<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>

事件处理：

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;
}

Answer 1

你的猜测是对的！在上下文菜单关闭函数的开头添加此行：

if (event.ctrlKey) return;

来源：（我没有代表发表评论。）

Safai/OSX 上的上下文菜单被打开的点击关闭

contextmenu on Safai/OSX getting closed by the click that opened it

javascript

contextmenu