时间戳

首页 > 解决方案 > Safai/OSX 上的上下文菜单被打开它的点击关闭

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

问题描述

我在框上有一个上下文菜单，例如用于复制/剪切/粘贴的框，它在 Windows 上与 Chrome 和 IE 一起按预期工作，但在 Safari (OSX) 上却不是。上下文菜单出现，但是一旦我放开鼠标点击器（无论是否在窗口上方），它就会被隐藏，并且不会<li>捕获对其的点击。

我怀疑正在发生的事情是 contextmenu 事件的初始点击（控制点击？）被传播到 $(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;
}

标签： javascriptcontextmenu

解决方案

你的怀疑是对的！在上下文菜单关闭函数的开头添加这一行：

if (event.ctrlKey) return;

资料来源：https ://stackoverflow.com/a/27973894/7503963 （我没有代表发表评论。）

推荐阅读