Develop Reference

JS - How to avoid a generic click handler stealing focus

I am using plain JavaScript (no JQuery etc.) to display a semi-modal dialog, which contains a small FORM
The way that I have things set up at the moment, the same handler will show a different dialog if the user clicks on a different part of the page, but if the user clicks on an INPUT field in my dialog, the click propogates/bubbles through to the handler, and the INPUT loses focus - the only way to type into it is to TAB into it, which is not exactly ideal!
Any suggestions on how to avoid this?

You can attach a click handler to your dialog's main element, and stop propagation at that point:
theDialogMainElement.addEventListener("click", function(e) {
e.stopPropagation();
}, false);
That way, clicking within the dialog doesn't propagate to the click handler on your page that's interfering.
If you need to support old versions of IE (IE8 and earlier) that don't have addEventListener and stopPropagation, see this other answer for a cross-browser event hookup function (which supplies stopPropagation as well).

You can call a .focus() on the specific input element you are referring to.
http://www.w3schools.com/jsref/met_html_focus.asp

listening for touchend sometimes fires click event mobile

I have an app im building with phonegap.
I'm listening for touchstart/ touchend events to make it responsive.
Sometimes, the event listener for the touchend will fire, but then, for e.g, an input will focus afterwards as the click event is fired 300ms later.
an example is, i have a menu sidebar. each sidebar list item listens to the touchend event. on receiving the event, the sidebar closes and the relevant page is shown. however, if the relevant page contains a form element that is where the user had clicked for the sidebar list item, the form element will get focused.
what is the best way to stop this across the entire app? it happens in various scenarios which vary with different phones.
Ive tried things like stopPropagation etc but these only work ina few cases, and i need to have a generic cross-app solution rather than adding in for each function, if possible.
something like:
$('body').on('touchend', function(){
//stop any further touchends/ clicks from firing
//apart from the 1 i do want
})

You could try 'touchcancel' instead of 'touchend', see if it works :) good luck.

your app goes to fast ;)
EASY WAY:
just put a setTimeout(gotopage(),100)
on every button/menu action
HARD WAY:
If you really don't want to put a setTimeout, you should take a look to how bubbling works, problem is here
TIP:
Anyway to avoid the 300ms you should use the Fastclick of FTLABS :
https://github.com/ftlabs/fastclick
and the use click event, it will do the job for you (you will still have to use setimeout trick)

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.

Internet Explorer Fires Change Events On Keypress

IE fires the change event on a select menu when using the arrows to navigate the menu. This is not the case in non-IE browsers. Non-IE browsers only fire the event when clicking on the option, or pressing enter after navigating to the item with the arrows. Is there a way program around this? I need the event to not fire when navigating with the keys.

I would add my own change event listener and handle things that way if I could. Without knowing all of the details it's hard to say but I'd look there first because the event cannot be cancelled. Outside of that approach, IE is going to fire the event when the value changes so not much you can do about that. Here is a link to the change/onchange in IE. It actually says this in the doc.
To invoke this event, do one of the following:
Choose a different option in a select object using mouse or keyboard navigation.
Alter text in the text area and then navigate out of the object.
It stinks but one of those you have to account for when using a select field.

The solution that worked for my situation was the following.
bind to the blur event instead of the change event.
This introduced another issue, where when I initially load the page the select fires a change event, and I need the code in my blur binding to take effect. Binding to change and having it trigger blur caused massive recursion. The solution was to create an init function that ran at startup.
initData : function(){
var t = this,
formSelects = 'select';
jQuery.each(formSelects, function(){
// do my code here that normally happens in blur.
})
}

Ghostclicks in mobile apps

There is a lot of material/posts on ghost clicks and I'm trying to understand it better. So the way I understand it, the reason for ghost clicks is the click event being dispatched ~300ms after the touch event. jQuery Mobile suggests to not use their vclick event whenever there is any chance of changing the content underneath the finger position.
My first question would be: Does that mean ghost clicks will only fire if the element targeted by click is different from the one originally touched? So, say, I write a database entry when a button is touched – nothing else. Is there a chance of ghost clicking or not?
If this is the case, wouldn't that mean that I can prevent ghost clicks altogether if I simply use only tap events and no click events whatsoever?
My last question would be if I can simply tell the browser to not use the 300ms delay when using PhoneGap (which would instantly solve the problem), but I'd just guess that I can't do that as it's probably hard-coded into the browser.

The click event is delayed by 300 ms to detect things like double tap or fat finger mistakes.
Yes, wherever possible you should use the touch events instead.
Yes, there are many ways to enable fast clicks by doing a bit of JS. For instance:
https://developers.google.com/mobile/articles/fast_buttons
https://forum.jquery.com/topic/how-to-remove-the-300ms-delay-when-clicking-on-a-link-in-jquery-mobile
http://labs.ft.com/2011/08/fastclick-native-like-tapping-for-touch-apps/
You don't have to live with the 300ms delay.

If everything on your page that can be clicked has the appropriate vclick jQuery event handlers installed, then one easy way of stopping ghost clicks is create a touchend event handler on the body and call preventDefault from it:
$(document.body).on('touchend', null, function(e) {
e.preventDefault();
});
Note that this will disable regular clicks from touches, so any conventional links or form inputs you have will stop working unless you add vclick handlers to them.