防止文档绑定捕获keydown()

Question

我不知道该如何表达，所以我无法搜索它。基本上，我在$(document)上有一个keydown()绑定。我想show()另一个div，并将所有keydown事件重新路由到此div，并防止在文档处理程序中触发。这可能吗，或者我必须把所有的主键绑定放在另一个div上，然后从那里开始工作？

Answer 1

e.stopPropagation，或e.preventDefault（视情况而定）其中e是事件。

例如：

function onKeyDown(e) {
   doStuff();
   e.preventDefault();
}

Answer 2

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()，掌握第一个可能有点困惑，但我创建了一个带有点击事件的演示来解释它

希望它能有所帮助！！

Answer 3

尝试：

​$(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.
});
​

演示：http://jsfiddle.net/Z7vYK/

Answer 4

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

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

HTML

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

Javascript

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

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

以下是代码演示：http://jsfiddle.net/Codemonkey/DZecX/1/