I'm working on this Javascript script that works nice in Safari and Chome but for some reason it doesn't work at all in Firefox. I identified the line that caused this: it's "break;".
How do I fix this?
What Nick said (remove the break)! If you are attempting to stop the event from bubbling try:
e.stopPropagation(); // this will stop any other parent handlers from firing
e.stopImmediatePropagation(); // this will stop any other handlers (including on the current object from firing.
e.preventDefault(); // this will stop the browser from handling the event.
Related
I have a handler that I use to detect when a user has focused the window, this works perfectly on Chrome but the event is not firing on IE11.
The event handler looks like: window.addEventListener('focus', this.doSomething);
Is there an IE11 equivalent of the above?
I have tried focusin but the behaviour is different and breaks my app.
Thanks
I tried and it worked on both Chrome and IE11:
window.addEventListener('focus', function () {
alert("focused")
})
Would you pls post your code?
Here's something odd, that I felt sure was working in earlier mobile browsers: In Chrome on Android, and Safari on iOS, it seems the touchstart event is fired after the click event, not before. When did this change?
A simple example:
jQuery(function($) {
var touched = false;
$('#clicky').on('touchstart', function(evt){
touched = true;
evt.preventDefault();
})
.click(function(){
if (!touched) {
alert("somehow touch didn't fire")
}
});
})
Run this fiddle, and you'll see the alert can pop up on Android and iOS, when it should actually never show!
http://jsfiddle.net/quxnxu7d/2/
I ran it through Chrome on Android and it worked as you expected for me. I added an alert to the touchstart handler and it fired to be sure that it was firing first and it did.
Take a look at the touch events mdn article. The article specifically mentions:
calling preventDefault() on a touchstart or the first touchmove event of a series prevents the corresponding mouse events from firing
Click is a mouse event so it "should" work as you expect (and it was working for me). I'd verify that the events are indeed running out of order (use console.log() instead of alert()) on your target browsers. If they are, which is perfectly possible with less than perfect browsers/specs, try using a different mouse event like mouseup. My guess is that you'll be able to find an event that works consistently.
Good luck!
Have you tried using mousedown instead of click? That way you should get different events for touch and click without any double firing. You will also likely need to use keydown to keep this site accessible.
There is a 300ms delay between a physical tap and the firing of a click event on some mobile browsers (e.g. iOS Safari)
I ran into the same issue and FastClick jQuery plugin fixed it for me
Have a look FastClick
When I try to inspect the touchmove event in this jsbin demo it only triggers once in Chrome and Opera for Android, and immediately after that, it triggers a touchcancel event, instead of continuing to trigger touchmove events?
Based on both the W3C specs, and the behaviour of the touchmove event in both Firefox for Android and Android's default browser, it seems to me that the way the touch events are supposed to work is that the touchmove event keeps triggering while the touch is still on the page. After trying to test in this jsbin though, I got the following log messages:
touchstart event; starting on (140,197) on the screen, or (381,536) on the page.
touchend event; starting on (undefined,undefined) on the screen, or (undefined,undefined) on the page.
touchstart event; starting on (181,137) on the screen, or (492,372) on the page.
touchmove event; starting on (182,153) on the screen, or (495,416) on the page.
touchcancel event; starting on (undefined,undefined) on the screen, or (undefined,undefined) on the page.
This is what happened when I first tapped the screen (shown via a touchstart and touchend), and then dragged the screen (touchstart, touchmove and touchcancel). Going by the same specs mentioned above, the touchcancel event should only run when something interferes , such as the browser interface (if I understand that correctly).
Since I was simply sliding my finger over the body, without leaving the window at all, I am really puzzled by this, so would anybody know why this is happening?
I am getting this unexpected result in Chrome 32 and Opera 19 for Android.
Turns out the problem here was simply the fact the event handler didn't have an event.preventDefault() in it, so the original action still executed, which apparently interrupted the touch event. To fix this, simply add e.preventDefault() in the current event handler function to cancel the current event, and make it work as expected in Chrome and Opera too.
Working demo.
my script reads something like this:
$(window).bind('popstate', function() {
//some code
//few more lines of code
});
This function works perfectly as intended in Chrome and Safari browsers. But Firefox for some reason ignores this function and does not work as intended.
Instead of using:
$(window).bind('popstate', function() {
//some code
//few more lines of code
});
You can use:
window.onpopstate = function() {
//some code
//few more lines of code
}
As firefox is using W3C defined rules for history API, so you have to use this for firefox and it works in chrome, safari and other browsers as well.
Note that just calling history.pushState() or history.replaceState()
won't trigger a popstate event. The popstate event is only triggered
by doing a browser action such as a click on the back button (or
calling history.back() in JavaScript).
Browsers tend to handle the popstate event differently on page load.
Chrome and Safari always emit a popstate event on page load, but
Firefox doesn't.
https://developer.mozilla.org/en-US/docs/Web/Reference/Events/popstate
Are you saying Chrome and Safari fire the event on page load or when the browser's back button is clicked? If the former, it's because Chrome/Safari are out of compliance with the HTML5 specs => the event should never be fired on page load. Up-vote https://code.google.com/p/chromium/issues/detail?id=63040 to get Google to fix this.
Please do Check that if you have coded window.load() more than once OR have called .onload() more than one time. This probably may work for IE but not for Chrome and fireFox.
I use a jQuery Dirty Forms plugin in my web-application like this:
$(document).ready(function(){
$('form.checkUnsavedData').dirtyForms();
});
$(window).on('beforeunload', function(){
if($.DirtyForms.isDirty()){
return($.DirtyForms.message);
}
});
But first click by any link doesn't trigger onbeforeunload event. Only the next clicks trigger it. This problem keeps in different browsers (google chrome, firefox, ie10). What's the matter?
I believe you will need to add the onBeforeUnload API As it says in the drupal Download & extend or else you should try not to bind the beforeunload through jQuery and do it with normal javascript like: window.beforeunload = function(){/*code*/};. Finally check what jQuery version are you using, what browsers and how they handle this event. Check out Catching the Javascript beforeunload event, the cross-browser way it's a little dated but it may help you.
What's the matter?
Dirty Forms automatically attaches to the beforeunload event. You are doing it again. This is likely causing your problematic behavior. You should change your code to just...
$(document).ready(function(){
$('form.checkUnsavedData').dirtyForms();
});