0

是否可以在上下文菜单中获取项目的事件？

Chrome中输入框的撤消功能不好，我今天早些时候写过。相反，我使用了由输入框的 keydown 事件触发的自定义撤消功能，并且我阻止了文档本身的 CTRL+Z keydown 事件（否则它会干扰）。

但是上下文菜单仍然存在旧的 Chrome 撤消。

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

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

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

1 回答 1

1

我不是 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);
}());

在jsfiddle上

于 2013-04-25T00:47:22.073 回答