Javascript 是否可以将上下文菜单中的项目中继到自写功能？

是否可以在contextmenu中获取项目的事件

我今天早些时候提到，Chrome中输入框的撤销功能不好。相反，我使用了一个由输入框的keydown事件触发的自定义undo函数，并且我已经阻止了文档本身的CTRL+Z keydown事件（否则会产生干扰）

但旧Chrome undo的上下文菜单仍然存在

我在找这样的东西。它存在吗

document.getElementById("input1").addEventListener('contextMenuUndoClicked', function(evt){customUndoFunction(evt, this);}, false);

function customUndoFunction(evt, caller)
{
    evt.preventDefault();    
    < undo stuff >
}

document.getElementById（“input1”）.addEventListener（'contextMenuUndoClicked'，函数（evt）{customUndoFunction（evt，this）；}，false）；
函数customUndoFunction（evt，调用者）
{
evt.preventDefault（）；

}

我不能100%确定您想做什么，这只是为了阻止浏览器内置上下文菜单并拥有自己的上下文菜单吗？如果是这样的话，那么像这样的事情可能会发生吗？我认为除了在某些浏览器的扩展中之外，您无法捕获在内置上下文菜单上单击的项目。这段代码以及撤销和重做在Chromium中工作，但在FireFox或Opera中对我来说不起作用

#info {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 230px;
    height: auto;
    border-style: solid;
    border-radius: 5px;
    border-width: 1px;
    box-shadow: 10px 10px 5px #888888;
    padding: 20px;
    background-color: #F3F3F3;
}
.menu {
    position: fixed;
    width: 180px;
    height: auto;
    border-style: solid;
    border-radius: 5px;
    border-width: 1px;
    box-shadow: 10px 10px 5px #888888;
    background-color: #F3F3F3;
    visibility: hidden;
}
.menutitle {
    text-align: center;
    font-weight: bold;
    color: white;
    background-color: black;
}
.menuitem {
    text-indent: 10px;
}
.menuitem:hover {
    cursor: pointer;
    width: 100%;
    height: auto;
    background-color: blue;
}
.fadein, .fadeout {
    overflow: hidden;
    /* This container should not have padding, borders, etc. */
}
.fadein {
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity 2s linear;
    -moz-transition: opacity 2s linear;
    transition: opacity 2s linear;
}
.fadeout {
    visibility: hidden;
    opacity: 0;
    -webkit-transition: visibility 0s 2s, opacity 2s linear;
    -moz-transition: visibility 0s 2s, opacity 2s linear;
    transition: visibility 0s 2s, opacity 2s linear;
}
.fadein > div, .fadeout > div {
    /* Put any padding, border, min-height, etc. here. */
}
.fadeout > div {
    margin-top: -10000px;
    -webkit-transition: margin-top 0s 2s;
    -moz-transition: margin-top 0s 2s;
    transition: margin-top 0s 2s;
}

<div id="info">
    <div>Hold CTRL for original context menu</div>
</div>
<input id="input1" class="customContext customTextContext" type="text"></input>
<input id="input2" class="customContext customTextContext" type="datetime"></input>
<input id="input3" class="customContext customTextContext" type="number"></input>
<input id="input4" class="customContext customOtherContext" type="color"></input>

/*jslint sub: true, maxerr: 50, indent: 4, browser: true */
/*global */

(function () {
    "use strict";

    var customTextContexts = document.getElementsByClassName("customTextContext"),
        info = document.getElementById("info"),
        inputTextContextMenu,
        inputOtherContextMenu;

    function hideMenus() {
        var menus = document.getElementsByClassName("menu");

        Array.prototype.forEach.call(menus, function (menu) {
            menu.style.visibility = "hidden";
        });
    }

    function toggleMenu(element) {
        var menus = document.getElementsByClassName("menu");

        Array.prototype.forEach.call(menus, function (menu) {
            if (menu.style.visibility === "visible") {
                menu.style.visibility = "hidden";
            } else if (element === menu) {
                menu.style.visibility = "visible";
            }
        });
    }

    function fadeout(element) {
        if (element.className.indexOf("fadein") !== -1) {
            element.className = element.className.replace("fadein", "fadeout");
        } else if (element.className.indexOf("fadeout") === -1) {
            element.className += "  fadeout";
        }
    }

    setTimeout(function () {
        fadeout(info);
    }, 3000);

    function context(evt) {
        var position;

        if (evt.target.className.indexOf("customContext ") !== -1) {
            if (!evt.ctrlKey) {
                evt.preventDefault();
                position = evt.target.getBoundingClientRect();

                if (evt.target.className.indexOf("customTextContext") !== -1) {
                    inputTextContextMenu.style.top = position.bottom + "px";
                    inputTextContextMenu.style.left = position.left + "px";
                    toggleMenu(inputTextContextMenu);
                } else if (evt.target.className.indexOf("customOtherContext") !== -1) {
                    inputOtherContextMenu.style.top = position.bottom + "px";
                    inputOtherContextMenu.style.left = position.left + "px";
                    toggleMenu(inputOtherContextMenu);
                } else {
                    hideMenus();
                }
            } else {
                hideMenus();
            }
        } else {
            hideMenus();
        }
    }

    function undoStuff() {
        hideMenus();
        document.execCommand('undo', false, null);
    }

    function redoStuff() {
        hideMenus();
        document.execCommand('redo', false, null);
    }

    function backStuff() {
        hideMenus();
        window.history.back();
    }

    function forwardStuff() {
        hideMenus();
        window.history.forward();
    } 

    function reloadStuff() {
        window.location.reload();
    }

    function createInputTextContextMenu() {
        var menu = document.createElement("div"),
            rich = document.createElement("div"),
            title = document.createElement("div"),
            undo = document.createElement("div"),
            redo = document.createElement("div"),
            back = document.createElement("div"),
            forward = document.createElement("div"),
            reload = document.createElement("div"),
            line = document.createElement("hr");

        menu.id = "customTextContextMenu";
        menu.className = "menu";
        title.textContent = "Text context menu";
        title.className = "menutitle";
        undo.textContent = "Undo";
        undo.className = "menuitem";
        undo.addEventListener("click", undoStuff, false);
        redo.textContent = "Redo";
        redo.className = "menuitem";
        redo.addEventListener("click", redoStuff, false);
        back.textContent = "Back";
        back.className = "menuitem";
        back.addEventListener("click", backStuff, false);
        forward.textContent = "Forward";
        forward.className = "menuitem";
        forward.addEventListener("click", forwardStuff, false);
        reload.textContent = "Reload";
        reload.className = "menuitem";
        reload.addEventListener("click", reloadStuff, false);

        rich.appendChild(title);
        rich.appendChild(undo);
        rich.appendChild(redo);
        rich.appendChild(line);
        rich.appendChild(back);
        rich.appendChild(forward);
        rich.appendChild(reload);
        menu.appendChild(rich);

        return menu;
    }

    function createInputOtherContextMenu() {
        var menu = document.createElement("div"),
            rich = document.createElement("div"),
            title = document.createElement("div"),
            back = document.createElement("div"),
            forward = document.createElement("div"),
            reload = document.createElement("div");

        menu.id = "customOtherContextMenu";
        menu.className = "menu";
        title.textContent = "Other context menu";
        title.className = "menutitle";
        back.textContent = "Back";
        back.className = "menuitem";
        back.addEventListener("click", backStuff, false);
        forward.textContent = "Forward";
        forward.className = "menuitem";
        forward.addEventListener("click", forwardStuff, false);
        reload.textContent = "Reload";
        reload.className = "menuitem";
        reload.addEventListener("click", reloadStuff, false);

        rich.appendChild(title);
        rich.appendChild(back);
        rich.appendChild(forward);
        rich.appendChild(reload);
        menu.appendChild(rich);

        return menu;
    }

    inputTextContextMenu = createInputTextContextMenu();
    document.body.appendChild(inputTextContextMenu);
    inputOtherContextMenu = createInputOtherContextMenu();
    document.body.appendChild(inputOtherContextMenu);    

    // right clicked context menu
    document.addEventListener("contextmenu", context, false);

    // other click hide context
    document.addEventListener("click", function () {
        hideMenus();
    }, false);
}());

#信息{
位置：绝对位置；
最高：50%；
左：50%；
宽度：230px；
高度：自动；
边框样式：实心；
边界半径：5px；
边框宽度：1px；
盒影：10px 10px 5px#8888888；
填充：20px；
背景色：#F3；
}
.菜单{
位置：固定；
宽度：180px；
高度：自动；
边框样式：实心；
边界半径：5px；
边框宽度：1px；
盒影：10px 10px 5px#8888888；
背景色：#F3；
可见性：隐藏；
}
梅努蒂特尔先生{
文本对齐：居中；
字体大小：粗体；
颜色：白色；
背景色：黑色；
}
梅努特姆先生{
文本缩进：10px；
}
.menuitem:悬停{
光标：指针；
宽度：100%；
高度：自动；
背景颜色：蓝色；
}
.fadein，.fadeout{
溢出：隐藏；
/*此容器不应有填充物、边框等*/
}
法丹先生{
能见度：可见；
不透明度：1；
-webkit转换：线性；
-moz转变：线性；
过渡：线性；
}
.淡出{
可见性：隐藏；
不透明度：0；
-webkit转换：可见性0s 2s，不透明度2s线性；
-moz过渡：可见性0s 2s，不透明度2s线性；
过渡：可见性0s 2s，不透明度2s线性；
}
.fadein>div、.fadeout>div{
/*在此处放置任何填充物、边框、最小高度等*/
}
.fadeout>div{
利润上限：-10000px；
-webkit过渡：利润率最高的0秒2秒；
-moz转换：边距顶部0s 2s；
过渡：页边距顶部0s2s；
}
按住CTRL键可显示原始上下文菜单
/*jslint sub:true，maxerr:50，缩进：4，浏览器：true*/
/*全球的*/
（功能（）{
“严格使用”；
var customTextContext=document.getElementsByCassName（“customTextContext”），
info=document.getElementById（“info”），
InputExtContextMenu，
输入其他上下文菜单；
函数hideMenus（）{
var menus=document.getElementsByClassName（“菜单”）；
Array.prototype.forEach.call（菜单，函数（菜单）{
menu.style.visibility=“隐藏”；
});
}
功能切换菜单（元素）{
var menus=document.getElementsByClassName（“菜单”）；
Array.prototype.forEach.call（菜单，函数（菜单）{
如果（menu.style.visibility==“可见”）{
menu.style.visibility=“隐藏”；
}else if（元素===菜单）{
menu.style.visibility=“可见”；
}
});
}
功能衰减（元件）{
if（element.className.indexOf（“fadein”）！=-1）{
element.className=element.className.replace（“fadein”、“fadeout”）；
}else if（element.className.indexOf（“淡出”）=-1）{
element.className+=“淡出”；
}
}
setTimeout（函数（）{
淡出（信息）；
}, 3000);
函数上下文（evt）{
var位置；
if（evt.target.className.indexOf（“customContext”）！=-1）{
如果（！evt.ctrlKey）{
evt.preventDefault（）；
position=evt.target.getBoundingClientRect（）；
if（evt.target.className.indexOf（“customTextContext”）！=-1）{
InputExtContextMenu.style.top=position.bottom+“px”；
InputExtContextMenu.style.left=position.left+“px”；
切换菜单（InputExtContextMenu）；
}else if（evt.target.className.indexOf（“customOtherContext”）！=-1）{
inputOtherContextMenu.style.top=position.bottom+“px”；
inputOtherContextMenu.style.left=position.left+“px”；
切换菜单（输入其他上下文菜单）；
}否则{
希门努斯（）；
}
}否则{
希门努斯（）；
}
}否则{
希门努斯（）；
}
}
函数（）{
希门努斯（）；
document.execCommand（'undo'，false，null）；
}
函数redoStuff（）{
希门努斯（）；
document.execCommand（'redo'，false，null）；
}
函数backsuff（）{
希门努斯（）；
window.history.back（）；
}
函数forwardStuff（）{
希门努斯（）；
window.history.forward（）；
} 
函数重载（）{
window.location.reload（）；
}
函数createInputTextContextMenu（）{
var菜单=document.createElement（“div”），
rich=document.createElement（“div”），
title=document.createElement（“div”），
undo=document.createElement（“div”），
redo=document.createElement（“div”），
back=document.createElement（“div”），
forward=document.createElement（“div”），
重载=document.createElement（“div”），
行=document.createElement（“hr”）；
menu.id=“customTextContextMenu”