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?
-
May b some code will help answer better.– StarxCommented 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 BonnevilleCommented Mar 14, 2012 at 16:38
4 Answers
e.stopPropagation
, or
e.preventDefault
(depending on the situation)
Where e
is the event.
Ex:
function onKeyDown(e) {
doStuff();
e.preventDefault();
}
-
1But how would I ensure that my newly shown div gets the events first? Otherwise my document handler would stop the propagation and the event would never get to the div. Right? Commented Mar 14, 2012 at 16:31
-
@ElliotBonneville That's handled by event bubbling. Check this link out for more info: quirksmode.org/js/events_order.html Commented Mar 14, 2012 at 16:33
-
1The "adding of a character to an input" is a
textinput
event which doesn't fire if eitherkeydown
,keypress
, orkeyup
is prevented. A better quirksmode link would be quirksmode.org/dom/events/keys.html Commented Mar 14, 2012 at 16:34 -
Awesome, thanks Jeffrey. I'll accept in '4 minutes' (how much longer I have to wait after asking a question to accept an answer). :) Commented Mar 14, 2012 at 16:37
-
1@ElliotBonneville I may not have the best answer. Wait it out. Commented Mar 14, 2012 at 16:38
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.
});
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/