Javascript 如何测试contextmenu是否打开或显示？

我有一个页面，页面上有几个

pre

标签，其中包含计算机代码。我有一个

mouseover

事件侦听器，它突出显示

pre

标记中的所有代码。我还让它删除

mouseout

事件上的突出显示。如果使用键盘进行复制（ctrl-C），效果会非常好

但是，如果您想右键单击并从上下文菜单中复制，则存在一个问题。鼠标进入上下文菜单时，会触发

pre

标记的

mouseout

事件

我需要一种方法来测试上下文菜单当前是否打开或显示。然后我可以取消删除突出显示。有没有办法测试上下文菜单是否打开或显示

我不想要任何jquery，拜托

我解决这个问题的最后一个选择可能是

oncontextmenu

，但我不知道如何确定它是否关闭。除非我尝试上下文菜单的

mouseout

事件的事件侦听器（如果可能）

以下是我目前的代码：

window.onload = function(){

    function selectText(element) {
        var range, selection;

        if(window.getSelection) {
            selection = window.getSelection();
            range = document.createRange();
            range.selectNodeContents(element);
            selection.removeAllRanges();
            selection.addRange(range);
        }
    }

    function unSelectText() {
        window.getSelection().removeAllRanges();
    }

    preTags = document.getElementsByTagName('PRE');

    for(var i = 0; i < preTags.length; i++) {
        preTags[i].onmouseover = function() {selectText(this)};
        preTags[i].onmouseout = function() {unSelectText(this)};
    }

    codeTags = document.getElementsByTagName('CODE');

    for(var i = 0; i < codeTags.length; i++) {
        codeTags[i].onmouseover = function() {selectText(this)};
        codeTags[i].onmouseout = function() {unSelectText(this)};
    }
};

window.onload=function（）{
函数selectText（元素）{
var范围、选择；
if（window.getSelection）{
selection=window.getSelection（）；
range=document.createRange（）；
范围。选择节点内容（元素）；
selection.removeAllRanges（）；
选择。添加范围（范围）；
}
}
函数unSelectText（）{
getSelection（）.removeAllRanges（）；
}
preTags=document.getElementsByTagName（'PRE'）；
对于（变量i=0；i

我知道这并不是对您特定问题的真正回答，但从用户体验的角度来看，选择悬停文本可能会让人困惑。用户可能认为这只是一个悬停效果。最好在文本旁边有一个“复制”按钮，或者单击要复制的文本。这带来了额外的好处，用户只需单击一次

document.getElementById（“代码”）.addEventListener（“单击”），函数（）{
navigator.clipboard.writeText（this.innerText）；
});
#代码{
光标：指针；
显示：内联块；
填充：15px；
边框：实心1px黑色；
}

打印（“你好，世界”）
打印（“你好，世界”）
打印（“你好，世界”）
点击复制。
因为JS中没有触发上下文菜单框关闭操作的事件，也没有可靠的工作。据我从不同的研究中了解，您的问题的答案是否定的

但是，如果您可以考虑类似的方法，可以使用自定义上下文菜单来解决您的问题

简短解释

向
code
和
pre
元素添加自定义上下文菜单。在您的例子中，只需要一个项目
复制
（在示例中，快速！和非常简化！显示为简单框）
打开菜单时，右键单击以避免停止选择代码（据我所知，您的问题/问题是什么）
打开菜单时，右键单击其他元素，这样就不会打开其他上下文菜单
单击菜单项“开始复制操作”“关闭并重置”时
当单击外部菜单关闭并重置时
简化示例

请注意：该示例是一个快速、肮脏且非常简化的示例，用于演示该技术。I tsure需要适应您的特殊项目


window.onload=function（）{
//通用vars
让isopencentextmenu=false；
const$contextMenu=document.getElementById（'contextMenu'）；
//一个对象中的所有代码/前置元素在一个循环中使用
const$codelements=document.querySelectorAll（'pre，code'）；
让$ActualDeElement={}；
//方法
函数selectText（元素）{
var范围、选择；
if（window.getSelection）{
selection=window.getSelection（）；
range=document.createRange（）；
范围。选择节点内容（元素）；
selection.removeAllRanges（）；
选择。添加范围（范围）；
}
}
函数unSelectText（）{
getSelection（）.removeAllRanges（）；
}
//听众
//当代码/前置元素上的上下文菜单打开时，阻止右键单击
函数ListenerContextMenuBlock（evt）{
evt.preventDefault（）；
}
//当代码/前置元素上的上下文菜单打开时单击
函数listenerMenuClick（ev）{
让$clickedElement=ev.target；
做{
如果（$clickedElement=$contextMenu）{
//单击上下文菜单
//-->复制操作
让codeToCopy=$actualCodeElement.innerText；
让temporaryInput=document.createElement（'input'）；
temporaryInput.type='text'；
temporaryInput.value=代码复制；
document.body.appendChild（临时输入）；
临时输入。选择（）；
document.execCommand（'Copy'）；
document.body.removeChild（临时输入）；
//-->关闭菜单并重置
$contextMenu.classList.remove（'contextMenu--active'）；
isopencentextmenu=false；
removeEventListener（'contextmenu'，listenerContextMenuBlocked）；
返回；
}
$clickedElement=$clickedElement.parentNode；
}while（$clickedElement）
//在关联菜单外单击
//-->关闭并重置
$contextMenu.classList