We Keep Coding

Click event - prevent capturing phase from child element

I need to add a code snippet to an existing site (actually it's SharePoint site) with a button that starts a Javascript function on click event.
The problem is that SharePoint already has several click events attached to body element. Some of them fire before my function get executed and some of them after.
I need to make only my click event fire.
The function that starts after mine I manage to stopped by stopPropagation() function. But what can I do to stop functions that fire before my event?
I assume the idea is to somehow stop capturing from child element...

If you don't need the click events attached to body to trigger when you click on the button, you can add a check in the event handlers attached to body click and stop the execution of code if your button is the originator of that event.
if(event.target == document.getElementById("your_buton_id")){return;}

Which touch event should e.preventDefault() be called in to cancel a "click" on a touch device?

To prevent a click from firing, you can call e.preventDefault() in a click event handler. This lets you bind an event to mousedown, see if something happens like the mouse moving a certain distance, and if so, prevent the click when the mouse button is released.
A click handler with e.preventDefault() does not seem to prevent a click on certain touch devices however. (I am testing on an iPad mini). I have also tried calling e.preventDefault() in the touchend handler, which seems to do nothing.
Calling e.preventDefault() in the touchstart blocks the page from scrolling, and is also useless because it is too early to tell if the click should be cancelled. Only touchmove can decide if a cancel needs to occur.
The issue is, when a user drags a draggable element which is also a link, it needs to cancel the "click" of the link on fingerup. This works just fine on a desktop by cancelling the click event.
Is there an equivalent event I can cancel that stops an "armed click" from going off once the user lifts their finger up?

iOS is known to not register the click event property. This is likely due to the fact that iOS waits a little longer to determine how a click should be interpreted as:
the start of a pinching/zooming gesture
two or multiple-finger panning
the start of scrolling
the start of double tapping
a simple tap event (which we are trying to capture)
the start of touch-and-hold
Therefore, you can listen to the tap event instead, included in jQuery Mobile.
The jQuery Mobile tap event triggers after a quick, complete touch
event that occurs on a single target object. It is the gesture
equivalent of a standard click event that is triggered on the release
state of the touch gesture.
The tap event is not native, because it relies on conditionally listening upon touchstart to determine if the start and stop targets are the same: if so, jQuery Mobiel determines that it is indeed a genuine tap event and fires the custom, non-native event tap. This logic can be seen in the original source file, at line 75 onwards of ./js/events/touch.js.
An example usage is as follow:
$(selector).on('tap', function(e){
e.preventDefault();
});

JavaScript: Swipe for Action Pattern Implementation

I have implemented the Swipe for Action Android pattern in my mobile web application (PhoneGap) using JavaScript & CSS animations/transitions.
However, there's one thing that's still eluding me.
I wish, that once the action menu is displayed fully and the user clicks anywhere outside of the action menu (labelled 3 in the figure), the menu should retract and the original item displayed (labelled 1 in the figure).
In a desktop application, one could "capture focus" and perform the transition back to (1) in lostfocus.
What is the JS equivalent of lostfocus event. I see an onfocus and onblur event, but from what I read it's really meant for things that need focus; like input, textarea, etc.
How else could I catch that event I'm interested in, other than putting some code in the touchend of every other element in the page and forcing the retraction of open actions explicitly?

I think you gave the answer yourself. focus and blur are the events to be used for this and they are not exclusively meant for input elements, as you can see here [1].
I'm even trigger the focus event manually in a layer use case: A layer opens and I want to capture the keypress of ESC to close the layer. For this I need to set the focus on the layer as my event handler would not fire otherwise.
To capture the click outside you just need to register for pointerUp or click events on an element that spans the whole screen (it must really cover the whole screen like the body element). Because of the event bubbling the handler will fire as long as nothing else captured and cancelled it.
[1] https://dvcs.w3.org/hg/dom3events/raw-file/tip/html/DOM3-Events.html#event-type-blur

How to Pass Click/Touch Event to a PopupPanel when starting from Outside Event Area?

I describe the following problem for Mouse Events as well as for Touch Events.
I want to do the following. Having a click/tab area which has the following function:
If I press the mouse down /touch start in this area a GWT PopupPanel should be displayed.
While the mouse is still pressed / touch is not released, the PopupPanel should be able to handle Events such as MouseOverEvent / TouchStartEvent.
I could manage to get the PopupPanel to occur. But, since the mouse is still pressed / touch not released there will no events be triggered on the PopupPanel. It does not matter if I use FocusPanel or mgwt TouchPanel inside the PopupPanel. Events will not be triggered if I enter the PopupPanel with the Mouse pressed or Touch pressed.
What the PopupPanel does:
The PopupPanel should serve as a context menu where one can tab, the popup menu occurs, one swipes over the popup menu (without releasing the mouse/finger) and release the mouse or the finger on the menu item one will choose.
Is there a way do enable events inside the PopupPanel when the event starts outside? Can I trigger the mousedown or touch start event when the PopupPanel occurs such that I can use events when I started the click/touch outside of the PopupPanel?
The following image shows this case:
Edit:
By the way I use the PopupPresenter from GWT-Platform. This adds a PopupPanel to the end of the page before
I tried the following. I put the PopupPanel of my page before the touch event starts right after page creation. The structure is like this.
<body>
< div />
< div />
<gwt-PopupPanel />
</body>
Then I hided popup and showed it on touch start. Again there are no events triggered since the mouse was pressed / finger is still on the display when the popup becomes visible.
Edit: Here is a sample project for this case: https://github.com/confile/popup-test

Determine what triggered focus event?

I need to determine what caused a focus event.
Ideally, I want to differentiate between a click, a tab/keyboard input, and a manual (via code) trigger.
How can I do this?
I'm looking at the event object, but I'm not seeing anything too useful.

If the focus comes from a $x.focus() call, then the event won't have an originalEvent property because there was no event from the browser so:
if(ev.hasOwnProperty('originalEvent')) {
// Focus event was manually triggered.
}
To differentiate between keyboard and mouse based focus events, you could try binding a keydown handler to everything else to detect a Tab or Shift-Tab but that would be a gross hack and probably not reliable; for example, on an iPad, you don't hit Tab to move to the next field, you hit Next or Previous in the popup keyboard to move around and those may not register as key presses at all.
There's a similar question about click events that might be of interest as well:
In jQuery, how can I tell between a programmatic and user click?
As you note in the comments, you could trap click events to detect a mouse-based focus change and set a flag somewhere to remember it. Then you'd have this:
If there is no originalEvent in the jQuery event then the focus change was triggered manually (i.e. $x.focus() or similar).
If the click handler flag is set then the focus change came from a mouse action.
Otherwise the focus change came from a keyboard event.
You'd have to be careful that your click and focus events came in the right order and you'd need to make sure the flag was cleared when you're done with it. This might not be bullet proof but maybe it doesn't need to be.