We Keep Coding

Why is touchstart event after click?

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

Angularjs event firing in chrome and firefox, but not in IE

I've got some problems with events in Angularjs. So I have an event in SomeCtrl implemented like this.
$scope.$on('event', function () {
// some logic
}
When I'm debugging in Chrome and Firefox, then debugger stops on breakpoints inside $on. But on IE, it doesn't. Someone knows, what can be, a solution to this?
EDIT:
I execute function like this where I want to fire event:
function doBroadcast(eventName, data) {
$rootScope.$broadcast(eventName, data);
}
Eventname is good, I checked it with debugger. I'm using IE11 and when I'm checking on IE9 with compability mode, then event is firing. But on IE10 and IE11 don't. My Angularjs ver. is 1.0.8.

Window binding not working in Firefox

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.

window.onbeforeunload doesn't triggered at once

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();
});

Javascript break breaks Firefox

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.