Develop Reference

Capture keydown events for multiple child iFrames in parent document?

This question says the only way for an iFrame to capture keyboard events is when it has focus, but the goal is a little different.
Our page embeds multiple iFrames, all of whom monitor the same keydown events.
Is it possible to capture keydown events for all these child iFrames from the root document? This way, we can avoid code reduplication.
If not, is the only option to capture the keydown event in each child iFrame and push the event and handling up to the root document?

It doesn't seem possible. We decided to catch keydown events in each child iframe and pass them to the parent document where a master function processes all keyboard events.
Unfortunately, it repeats some code in each child iframe, but this seems unavoidable until a better solution emerges.

Dispatch KeyHandler event to new DOM target with Google Closure (or plain Javascript)

I have a web-application that needs to capture any keyboard event on the page, and target them to the appropriate editable-div.
If the editable-div has focus, then the event flows to my event handler and to the DOM to push the character corresponding to the key into the DIV.
However, if the editable-div is not the current focus target, I am able to capture the event with my event handler, but the character corresponding to the key pressed is not pushed into the DIV.
My previous implementation had a dependency on jQuery, and $.trigger() was doing the right thing: moving the keyboard event from a non-matching target to the default editable-div I choose.
I am trying to achieve the same without jQuery, and with Google Closure. I tried various incantations of dispatchEvent without success in triggering the new virtual keypress.
In ClojureScript, trying to do something naive such as
(.dispatchEvent new-target (.getBrowserEvent event))
will cause the browser to complain that The event is already being dispatched.
Is there any simple solution to this problem?

You can use goog.testing.events/fireKeySequence to create events similar like jQuery's trigger.
More discussions.

How to tell what Javascript event just fired

Is there any way in Javascript to tell what the most recently-fired event was? Reason I'm asking is I'm working on a site that isn't behaving properly on one of those new Ultrabooks that's running Windows 8 and is a laptop with a touch screen. If you use the standard mouse functionality (with a touchpad or an actual mouse), things work fine, but if you use the touch screen, things don't.
This only happens with IE; Chrome has its own issues (which I have fixed in the code), and Firefox hasn't given us any problems.
Basically, the functionality we have includes a "hoverIntent" block, and if you use the touch screen on IE, it registers both the "over" and "out" functions, which is a problem.
However, if there was a way for me to tell whether the last thing that happened was that the user TOUCHED THE SCREEN or CLICKED WITH A MOUSE, I'd have a solution in place. But I couldn't tell if there's a way to do that.
The only thing I could find was tacking on ".data('events')" on an element, but what returns is "click" regardless of whether it was an actual mouse click or a tap on the screen.
Is there a way to do this?

The browser does not have a standard way of recording events that happened previously. If you want to know what events happened prior to the current event, then you will have to install an event handler for those events and record them yourself so you can then look back at them at some future time.
For events that propagate, you could install some event handlers on the document object and record both event and target for the last N events.
If you're just trying to figure out what event the current event is, then you can examine the type property of the event object that is passed into the event handler as in e.type.

You can add an event to your function arguments and then use event.type to check which event is triggered.
ex:
var x = function(e) {
alert(e.type);
}

So I found out that IE has a completely different set of touch events from what EVERY OTHER BROWSER IN THE UNIVERSE has. ughhh. Instead of "touchstart," you use "MSPointerDown," etc. My solution was basically to write new event handlers for MSIE's touch device events.

Detect if CKEditor used a keyup event, or prevent its propagation

In short
Is there a way in which, when listening to a native event, I can detect if the event was somehow used by CKEditor before it propagated to my listener, or prevent it from propagating at all?
Use case
I'm listening to the keyup event using jQuery, to detect when escape is pressed. When it is, the user is prompted if they want to discard changes, and the CKEditor instance is destroyed and its element removed from the DOM.
$('body').on('keyup', function(e){
if(e.which==27){
CKEDITOR.instances.myDiv.destroy();
$('#myDiv').remove();
}
});
The problem here is that CKEditor allows the user to interact with certain UI elements using the escape key. For instance to close a dialog window or drop-down list.
So my event should only execute its code if CKEditor did not already use the event to close a UI element of its own.
Attempt
I tried to listen to the dialogShow and dialogHide events to detect if a dialog window is open, and my action should thus be ignored. This didn't work for two reasons:
CKEditor handles the event first, so by the time the event propagates to my listener, no dialog windows are open and my code is executed.
Even if it would work, it wouldn't for drop-down lists as they do not trigger the dialog* events.
Ideas
I don't know enough about the workings of CKEditor to come up with a solution, but I think I'm looking for something along the lines of:
A setting in CKEditor to prevent event propagation: CKEDITOR.instances[0].noEventPropagation = true
An indication in the original event object: if(event.CKEditorWasHere){/*do nothing*/}
A plugin providing functionality that I can use.
Worst case scenario: A setTimeout in the dialogHide event which I'll use to suppress my own events for a short time.
So
Maybe I'm completely overlooking something. This seems to me like a common problem which should have a simple solution.
Thanks for your time.

Catching tab key navigation

I want to catch which element is on focus when users use tab key to move their focus. For example, there is a form and users can use tab key to move forward to next form element. I'd like to know which element is the current on focus.
Thanks,
Paul

For many event types one can use event delegation, whereby one captures the event on some containing element as it bubbles up the document hierarchy, and then establishes the element on which the event originated. Unfortunately, the focus, blur, and
change events do not bubble.
However, in DOM implementations that implement the standard DOM Events model, one can instead use the capture phase, which intercepts the event on its way down to the element where it will fire.
This doesn't work in (surprise, surprise) Internet Explorer (IE), which still doesn't have an implementation of the standard event model, even in IE8. However, IE has its own focusin and focusout events, which do bubble.
The end result is that, as usual, one has to write one's code so as to deal with the way proper browsers work, and also with the way IE works.
Luckily this is one of those cases where ppk (aka Peter-Paul Koch) of quirksmode.org has already done the hard work: his article Delegating the focus and blur events should tell you all you need to know, as well as providing a succinct explanation of how event delegation works.

use the onFocus event on the form elements, so
<form>
<input id="fred" type="text" onFocus="alert('focused this');"/>
</form>
check out http://www.w3.org/TR/html4/interact/scripts.html#adef-onfocus

there are javascript events that are related to focus. The onfocus and onblur (opposite of focus) events can be used to update a variable that says which form element is currently in focus.