I'm not exactly sure how to phrase this, so I couldn't search it. Basically, I have a keydown() bind on $(document). I'd like to show() another div, and have all keydown events be rerouted to this div and prevented from firing off in the document handler. Is this even possible, or would I have to put all my main keybindings on another div and work from there?

I'm not exactly sure how to phrase this, so I couldn't search it. Basically, I have a keydown() bind on $(document). I'd like to show() another div, and have all keydown events be rerouted to this div and prevented from firing off in the document handler. Is this even possible, or would I have to put all my main keybindings on another div and work from there?

• javascript
• jquery

• May b some code will help answer better. – Starx Commented Mar 14, 2012 at 16:37
• I think it's clear enough. Plus, I don't have any code yet. This is purely theoretical speculation. :) – Elliot Bonneville Commented Mar 14, 2012 at 16:38

4 Answers 4

e.stopPropagation, or e.preventDefault (depending on the situation) Where e is the event.

Ex:

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

e.preventDefault() will prevent the default behaviour of an event. What you need is to use e.stopPropagation(), so that the event does not bubble up the DOM structure.

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

e.stopProgation(), can be bit confusing to grasp on the first but I created a demo with click event to explain it.

Hope it helps!!

Try:

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

demo: http://jsfiddle.net/Z7vYK/

The only way I can think of to even have a keydown event run on something other than an input or document, is to manually trigger it. You could have a global variable keep track of whether or not your div is showing, then trigger the event on your div accordingly.

Here's one such solution

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

​ As you can see, the #hiddendiv keydown event is being triggered by the document keydown event. I've also included a slight hack to get the event object to the hidden div using the jQuery data function.

Here's a demonstration of the code: http://jsfiddle.net/Codemonkey/DZecX/1/