Можно ли перевести элемент в контекстное меню на самостоятельную функцию?

Question

Можно ли получить событие предмета в контекстном меню?

Функция отмены для окна ввода в Chrome не подходит, I wrote about it ранее сегодня. Вместо этого я использую пользовательскую функцию отмены, которая запускается при событии keydown из окна ввода, и я заблокировал событие keydown CTRL + Z самого документа (в противном случае это мешает).

Но контекстное меню все еще существует со старым отменением Chrome.

Я ищу что-то вроде этого. Он существует?

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

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

Answer 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); 
}()); 

jsfiddle на