Is there a way to completely apply stopImmediatePropagation() across the board? Since I thought it was annoying to do that in each tap event handler, let say.
I commented in this question as an FYI:
Stop jQuery Mobile swipe event double bubbling
Can you do something like:
$(document).on('click', function(event){
event.stopImmediatePropogation();
});
The only solution is to do event.stopImmediatePropogation(); on each handler function. It's a hassle.
Related
I have a situation where an anchor fires the 'click' event before the input, which loses the focus and fires the 'focusout' event.
To be clear, I write something in the input and then I click the anchor. I'm expecting the 'focusout' event to be written to console first and then the 'click' event.
I'm not able to reproduce this in a dummy app like in the code below, it only reproduces in the web app I'm working on, which I can't share here.
click me
<input type="text" id="t">
<script>
document.querySelector("#a").addEventListener('click', function(e) {
console.log('click');
});
document.querySelector("#t").addEventListener('focusout', function(e) {
console.log('focusout');
});
</script>
Any idea how could it be possible for anchor to fire the 'click' event first before the input firing 'focusout' event?
I'm pretty dazzled how it's actually possible... I can't see how in the world, even if I wanted to, be able to make the 'click' fire first. I checked several times the event object in watcher in Chrome dev tools and I can't see anything peculiar
I'm using latest Chrome on Windows 10
The change event doesn't fire until the input loses focus. You can use onkeypress instead.
Ironically enough, it seems like jQuery .focusout / .click conflict has the exact opposite problem as you. From what I'm reading around the web it seems like the general concesus is that the HTML specification doesn't actually specify the order of events and it is up to the browser to implement however they see fit. However, in your case I would certainly expect focusout to happen first, tho clearly it isn't. Have you tried "onblur" instead?
I found it! This is one of those things which doesn't let you sleep well.
The issue was somewhere else, in some library, there is a mousedown handler on the anchor with a e.preventDefault():
http://jsfiddle.net/vynd7kgj/
This sucks. I don't know if I should cry or laugh.
Why would you want to do something like this?
I have a page, that works perfectly on regular computer, but doesn't work correctly on tablet devices.
The trouble is that I'm using inline onclick handlers and they don't get fired on touch.
How can I extend regular onclick event without refactoring the whole page to call the same functions ontouch or onclick (but not twice).
I have multiple elements like this:
<button onclick="alert('OK')"></button>
How can I make them work without adding ontouch handler to each of them?
I found the solution, that seems to work for me, but I'm not sure about it.
I just trigger click event on touch, canceling default behavior.
It seems to work for any kind of click handlers, inline and passed to jQuery .click()
$(document).on('touchstart', function(event){
event.target.click();
event.preventDefault();
});
Does anyone have a link to a list of ALL events that can be passed to jQuery .on()?
Here are a few, but I cant seem to find a definitive list.
click
mouseenter
mouseleave
contextmenu (works on right click, and tap and hold with Android (not iOS))
focus
blur
focusin
focusout
scroll
I'm looking for Android/iOS touch events in particular.
Thanks!
EDIT 1: So I think the real question i'm asking is what events are standard across all browsers/devices?
I think you have to realise that the important question is not: What events can you pass to jQuery.on()? Because you can technically pass any event to that method.
The real question is, what events does the browser/device fire? Obviously, some events — as the ones you listed — are a standard, but some browsers will surprise you by not firing some events or by having their own custom events.
You can find a pretty extensive list at the MDN:
Events reference
But keep in mind that the point is that you can also define your own custom events, trigger them, and bind event listeners to them.
For touch screen devices you will have the following events:
touchstart
touchend
touchmove
touchcancel
Are you using jQuery mobile? The events are listed here: http://api.jquerymobile.com/category/events/
Google DOM Events, get MDN Event Reference.
You may be particularly interested in the TouchEvent subclass.
Of course, you can bind any custom event using .on and trigger any custom event with .trigger, so the real answer is infinite.
You can register any event names. Whether they will be called is another question… Custom events can be manually triggered, and there are many that are triggered natively in the DOM. For some of them, jQuery has special shorthand methods.
I'm looking for Android/iOS touch events in particular.
Have a look at https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Touch_events then, or the W3 spec.
All jQuery events.
Here are lists of keyboard events and mouse events.
I have a fairly large html page and I've noticed that my click-to-show/hide process appears a little retarded.
I've also discovered that if I use "mouseenter" in place of "click", the response is almost instantaneous (as opposed to 2 seconds when I use "click").
$("button.showhide").click(function() { $("#"+$(this).attr("id")+"-1").toggle() });
versus
$("button.showhide").mouseenter(function() { $("#"+$(this).attr("id")+"-1").toggle() });
Is there any way to make the click event as fast as the mouseenter event?
Thanks.
Edit:
Does the following help in explaining this behaviour?
(There's no mention of a "javascript event" for mouseenter.)
.click()
Bind an event handler to the "click" JavaScript event, or trigger that event on an element.
.mousedown()
Bind an event handler to the "mousedown" JavaScript event, or trigger that event on an element.
.mouseenter()
Bind an event handler to be fired when the mouse enters an element, or trigger that handler on an element.
You should use a delegate to trigger your events(from jQuery 1.7 use on method for events binding) :
$("button").on('click','.showhide',function(){/*...*/});
You could improve the speed of the event handling, but that depends on the html markup.
For instance, if all of your showhide buttons are grouped in a certain div, and some other buttons are in other scattered all over the body, you should use something like this :
$("button-container-selector").on('click','button.showhide',function(){/*...*/});
I think that the time to process
function() { $("#"+$(this).attr("id")+"-1").toggle();
is exactly the same in the two cases, it's just that mouseenter triggers much earlier than click and so you think it's faster.
The only thing i could think of is that you have realy a lot of click handlers, but i think you really nead a lot to slow down things
EDIT - Try doing
$('body').on("click", "button.showhide", function() { $("#"+$(this).attr("id")+"-1").toggle());
By reading all previous answers, and the behaviour explained in the question, I think that there might have been a key piece of information missing. Was your test was happening in a tablet or a touch-enabled device by any chance?
Some touch-enabled browsers or devices will slow down click events to allow for a delay, so the user can start a gesture instead of issuing a click. This would explain why, in your case, "mousedown" or "click" are slower than "mouseenter", which in a touch device happens as soon as you touch the element being monitored.
If this is the case, what I would do to improve responsiveness and be compatible in different types of devices, is binding both "mousedown" and "touchstart" (compatible with touch-enabled devices) to the code that must execute after the mouse press (or screen touch).
In your case:
$("button.showhide").bind('touchstart mousedown', function() {
$("#"+$(this).attr("id")+"-1").toggle()
});
I hope this helps.
Is there a way to disable/set to false the onMouseUp event in javascript so that when a button is clicked it fires on mousedown by default?
Aside from the fact that onmousedown happens before onmouseup, you can't prevent an event from happening. You can however prevent default behavior of an event by executing "preventDefault()" on the event object itself.
No.
To be honest, I very much suspect there's a better way of achieving what you're after. I suspect if you update your question with some more surrounding information you'll get some good advice. :-)