是否可以在上下文菜单中获取项目的事件？
Chrome中输入框的撤消功能并不好，我今天早些时候 wrote about it 。相反，我使用由输入框的keydown事件触发的自定义撤消功能，并且我已经阻止了文档本身的CTRL + Z keydown事件（否则会干扰）。
但旧的Chrome撤消仍然存在上下文菜单。
我正在寻找类似的东西。它存在吗？document.getElementById("input1").addEventListener('contextMenuUndoClicked', function(evt){customUndoFunction(evt, this);}, false);
function customUndoFunction(evt, caller)
{
evt.preventDefault();
< undo stuff >
}
答案 0 :(得分：1)
我不是100％确定你要做什么，是否只是为了阻止浏览器内置的上下文菜单并拥有自己的？如果是这样，那么这样的事可能呢？我不认为您可以捕获内置上下文菜单中单击的项目，除了某些浏览器的扩展名。此代码和Undo和Redo在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);
}());
on jsfiddle