pointerdown vs onclick: what is the difference? - javascript

What is the difference between the onpointerdown and onclick event handlers?
Are there any practical differences? Are the events not propagated the same up the DOM tree? Are there some devices that only respond to one of these events?
I initially assumed that it is only pointerdown that is triggered in touch devices or with a pen, but onclick seems to be triggered as well.

Are there any practical differences?
Yes there are.
pointerDown it's actually equivalent to onMouseDown but the main difference is that mouseDown only sends to an Element but pointerDown can be sent to Document, Window, and Element.
What is the difference between the onpointerdown and onclick event handlers?
pointerDown can captures the right/left/middle clicks.
onClick only captures the left click.
Live Example:
The example will make it clearer.
https://codepen.io/nawafscript/pen/WNEyRyO

To add to Nawaf answer:
The point in time when the evenhandlers are fired is also different (at least when using mouse).
onPointerDown fires when the mouse button is pressed down
onClick waits for press AND release of the mouse button.

Related

Prevent event triggering on bubbling and on capturing in JavaScript

Is it possible to prevent event triggering on bubbling and on capturing in JavaScript?
The e.stopPropagation() is not what I am looking for.
In my case I would like only a direct window blur to trigger the event. Triggering the blur event on window on every child control blur affects performance. (I believe that it is not related to the question, but still in order to avoid the xyz problem I will mention that I am using the blur event on window to check that the blur happened due to iframe click and in case it did, then I run some code. I.e. what I need here is a way to attach a blur listener to window, so that the blur listener would run only on window blur, but not on its children blur.)
Maybe there is a way to add an event listener to a target phase of window blur only? Or will the listener be always called on bubble and on capture and it is impossible to avoid?
event bubbling travels from child to parent. So it is essentially event capturing which you want to prevent.
When you add a event listener using
window.addEventListener("focus", callback, true/false)
This third argument suggest capturing or bubbling. So if you will just keeps it false event will just bubble and since window is the top most element it wont be propagated to anywhere else.

hammer.js - how to register a "hold" event without propagating a "click" event?

I want to register a hold event, but "skip" the logic behind the "click" event on this element and its parents... how do I do that?
Test case (please feel free to fork & edit): http://codepen.io/muszek/pen/detAK
Use case: User holds on a #foo box to open up a #bar dialog with options for that element. Clicking anywhere (but on the #bar) closes the #bar. Currently, holding #foo opens up #bar, but immediately closes it when the button is released.
Hammer.js doesn't really handle the native events. So here you should listen for the tap event rather than the click.
I don't think a tap event is triggered if the gesture is a hold, but if it does, just call e.gesture.stopDetect(); to prevent multiple gesture type of being triggered. (for example, this is often use to prevent release event from being triggered after a swipe)
You can't prevent a native click being fired. What you should do is listen for 'tap' instead of 'click'. Hammer.js defines hold as a tap that lasts more than a certain amount of time.
If you are not listening for 'click' at all, but want to prevent an href or a button from being fired, forget it. Change the button for a div and the href for a normal text, style them so they look as before and now listen for 'tap' on them.
http://codepen.io/anon/pen/dPVXrP
Wrap inside parent <div>.

Two click events fired: on fixed positioned <div> and <a>

I have a couple of questions regarding events attached to DOM nodes. Consider the following:
http://jsfiddle.net/hXq6r/15/
Basic:
[1?] What level is the [I] (class="fixed") dom node? What level is the [II] class="container"> dom node?
[2?] How do you describe the relationship between the objects mentioned in 1? Ancestors are siblings?
[3?] When clicking the .fixed - why is the hyperlink event not triggered?
Problem:
All runs as expected. Now running this code in the Android WebView causes the problem: The click event is fired first on #button and then again on the hyperlink. I am running phonegap 1.4.1 I have no event handler attached to the hyperlink, it is just the default hyperlink event.
[4?] How is the default hyperlink event named? Click?
Advanced:
[5?] Which of the elements fires the click event first? Does it depend on the 1. level in the dom?
[6?] It seems that [I] fires first.
[7?] How can I stop the click event on [II] from firing if [I] fired previously? I just set a variable to check. Is this the best solution?
[8?] Event propagation - I assume this is of no use for this example, because we are looking at children, no ancestors. Should I delegate the event on a higher level?
Thanks : ). Hopefully this helps me with grasping the whole event basics.
Useful:
http://www.quirksmode.org/js/introevents.html
http://www.quirksmode.org/js/events_order.html

Javascript Touch Object

I am trying to differentiate a click from a swipe in Javascript using touch events. I would like to know, is there a property in the touch event object that can be inspected to determine the difference on a 'touchend' event, or do you have to listen for both a touchstart or touchend AND a touchmove event? I am trying to minimise the number of event listeners I have to add to the DOM and am wondering if it is possible to do this by observing a single event? Specifically I am looking at webkit on iOS.
Don't bind to the click event at all. It responds much slower than the collection of touch events.
To check for a swipe, you need to listen for the touchstart and touchend events. Don't worry about touchmove unless you're planning on doing something when that event fires.
On the touchstart event, you will need to record the x/y position of the event. On the touchend event, do the same again. What you'll also need is some kind of threshold value, so that when you calculate the difference between x1-x2 and y1-y2 you can determine if it was a swipe or not.
Apple gives a meta-algorithm that involves touchmove here http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html. Search on that page for "identify a swipe" and you'll find it.
I personally have never needed to use touchmove and successfully have used the technique I described above. However, either is a valid approach so you should investigate what works best for you.

onmouseout event control

I have a DIV with a mouseout observer.
This DIV have also child Elements. mouseout event will alse be fired if the mouse pointer enter any of its child elements.
How can I prevent this behavior?
That’s expected behaviour.
However you can prevent it by giving those child elements an onmouseout event as well and returning false.
returning false in the event handler will stop the propagation of the event to parent-elements.
You may want to check a JS library.
JQuerys mouseleave function/event seems to be exactly what you’re looking for.
The API page also states the mouseleave event is IE-proprietary but JQuery emulates it for other browsers. If you don’t want to use JQuery you may want to check their source. api.jquery.com/mouseleave

Categories

Resources