Javascript 防止文档绑定捕获keydown（）

我不知道该如何表达，所以我无法搜索它。基本上，我在

$（文档）

上有一个

keydown（）

绑定。我想

show（）

另一个div，并将所有keydown事件重新路由到此div，防止在文档处理程序中触发。这是可能的，还是我必须将所有主键绑定放在另一个div上并从那里开始工作？

e.stopPropagation

，或者

e.preventDefault

（视情况而定） 其中

e

是事件

例：

e.preventDefault（）

将阻止事件的默认行为。你需要的是使用

e.stopPropagation（）

，这样事件就不会在DOM结构中冒泡

$(element).keydown(function(e) {
     // do the task
     // allow the default behaviour also
     e.stopPropagation();
   //^. BUT stop the even bubbling up right here
});

e.stopProgation（）

，在第一个方面可能会让人有点困惑，但我创建了一个with click事件来解释它

希望能有帮助

试试看：

​$(document).on('keydown', function (evt) {
  $('#foo').show().trigger(evt);
});​​​​​

$('#foo').on('keydown', function (evt) {
  console.log(evt);
  return false; // this is very important. Without it, you'll get an endless loop.
});
​

---

演示：

要想在输入或文档以外的其他对象上运行keydown事件，我唯一能想到的方法就是手动触发它。您可以让一个全局变量跟踪div是否显示，然后相应地触发div上的事件

这里有一个这样的解决方案

HTML

​ 如您所见，#hiddendiv keydown事件由document keydown事件触发。我还包括了一个使用jQuery数据函数将事件对象获取到隐藏div的小技巧

---

下面是代码的演示：

但是如何确保新显示的div首先获得事件？否则，我的文档处理程序将停止传播，事件将永远不会到达div。对吗？@ElliotBonneville，这是由事件冒泡处理的。查看此链接了解更多信息：“向输入添加字符”是一个

textinput

事件，如果

keydown

、

keypress

或

keyup

被阻止，则不会触发该事件。更好的怪癖模式链接会很棒，谢谢Jeffrey。我将在“4分钟”内接受（在提出问题后，我需要等待多长时间才能接受答案）：）@ElliotBonneville我可能没有最好的答案。请稍等。b一些代码可以帮助你更好地回答问题。我想已经足够清楚了。另外，我还没有任何代码。这纯粹是理论上的推测

​$(document).on('keydown', function (evt) {
  $('#foo').show().trigger(evt);
});​​​​​

$('#foo').on('keydown', function (evt) {
  console.log(evt);
  return false; // this is very important. Without it, you'll get an endless loop.
});
​

<a href="#" onclick="showdiv();">Show div</a>

<div id="hiddendiv"></div>​

var showing = false;

function showdiv()
{
    showing = true;
    $('#hiddendiv').show(200);
}

// Set up events on page ready
$(function() {
    $(document).keydown(function(e) {
        // If the div is showing, trigger it's keydown
        // event and return
        if(showing)
        {
            $('#hiddendiv').data('keydown_event', e).keydown();
            return true;
        }

        alert('Document keydown! Keycode: ' + e.keyCode);

        // Otherwise do the normal keydown stuff...
    });

    // Keydown for the hidden div
    $('#hiddendiv').keydown(function() {
        e = $(this).data('keydown_event');
        alert('Hiddendiv keydown! Keycode: ' + e.keyCode);

        // Make sure to stop propagation, or the events
        // will loop for ever
        e.stopPropagation();
        return false;
    });
});