不要在textareas的上下文菜单上触发.keyup

Question

我有以下jQuery代码：

$('#textbox').keyup(function(e) {
  if (e.keyCode == 27) { alert( 'You escaped!' ); }
});

如果我打开上下文菜单来更正某个单词，然后决定不更正它并按“Esc”，则使用键盘触发此文本框的.keyup。

http://jsfiddle.net/jesin/mr6ty820/

如果对textarea而不是上下文菜单按下了escape，我怎样才能确保(e.keyCode == 27)内的代码有效？

Gmail的“撰写”框也会在“Esc”上关闭，但如果按“Esc”进入上下文菜单，它就不会退出。

Answer 1

您可以在上下文菜单处于活动状态时侦听鼠标右键并设置变量，这样它就不会在文本字段的ESC上触发。

var contextMenu = false;

$('#textbox').bind('mousedown keyup', function (e) {

    if (e.keyCode == 27 && !contextMenu) {
        alert('You escaped!');
    }

    if (e.button == 2) {
        contextMenu = true;
    } else {
        contextMenu = false;
    }
});

Answer 2

这不是一个很好的，也不是保证跨浏览器的解决方案，但可能会让你更接近。它适用于最新的Chrome，可在其他浏览器中自行测试。 See the fiddle

var contextOpen = false;

$(document).on('contextmenu', function (e) {
    contextOpen = !contextOpen;
   console.log(e); 
});

$('#textbox').keyup(function(e) {
  if (e.keyCode == 27 && !contextOpen) { alert( 'You escaped!' ); }
});

$('#textbox').on('keydown click focus', function () {
   contextOpen = false; 
});

如果浏览器触发“contextmenu”事件阻止Esc运行，则此代码基本上会跟踪上下文菜单的打开。困难在于跟踪上下文菜单的“关闭”事件，因为这不可用。你必须解决这个问题，所以当#textbox收到焦点，keydown或click时，我选择重置contextOpen，因为这通常意味着重置。