We Keep Coding

mouseleave event for document, with consideration for Chrome bug

I need to safely detect when the mouse leaves the window. I have jQuery included, so normally this would be fine:
$(document).on("mouseleave", function(event) {
doSomething();
});
However, there is a major bug in Chrome currently where this mouseleave function fires randomly when clicking in the element.
Normally, there's an easy work around for this:
$("#some-id").on("mouseleave", function(event) {
var e = event.originalEvent;
if (!e.relatedTarget || !e.toElement) {
// BUG in Chrome
return;
}
doSomething();
}
However, this doesn't work for document, or for any element when the mouse leaves the window, since in this case, e.relatedTarget and e.toElement are null exactly like when the bug occurs. So I'm trying to come up with something that will be able to safely determine when Chrome is acting up, and when the mouseleave event actually should fire.
Update: Just tried an approach with mouseout instead. The same chrome bug affects this event too, so no good. :/
UPDATE: this was apparently fixed, the Chrome issue was marked "fixed", and my tests show that the current version of Chrome no longer has the issue. :D

For now, this is the solution I came up with. Hopefully someday this major bug in Chrome gets enough attention to get a fix.
In the event that mouseleave occurs as a bug, it is usually almost immediately by the mouseenter event. So what I did here was just wait 1/10 of a second after the mouseleave event to make sure it's not a Chrome fluke.
var documentMouseLeaveTimeout = null;
$(document).on("mouseleave", function() {
documentMouseLeaveTimeout = setTimeout(function() {
doSomething();
}, 100);
});
$(document).on("mouseenter", function() {
clearTimeout(documentMouseLeaveTimeout);
});
Still hoping there's a better answer.
UPDATE: this was apparently fixed, the Chrome issue was marked "fixed", and my tests show that the current version of Chrome no longer has the issue. :D

Behaviour of event.stopPropagation(); in different browser

I want to use event.stopPropagation(); method of jquery to stop bubbling of events.
But i am not sure if it works for all browsers as it is. Can any one please help in making it work for all browsers
eg :Ie(7,8,9,10),firefox,chrome.

event.stopPropagation() is normalized across browsers, so it should work on all platforms and all browsers. As a general practice event.stopPropagation is used in combination with event.preventDefault and these two actions are equal with return false statement.
function() {
return false;
}
// IS EQUAL TO
function(e) {
e.preventDefault();
e.stopPropagation();
}

event.stopPropagation(); is a intelligent function, once you have included JQuery library which uses pure JavaScript , handles every browser.

preventDefault() not working as desired

<script>
function confirmDel(evt)
{var con =false;
con=confirm('Do you really want to remove this purchase?.');
if(con)
{
return true;
}else
{
event.preventDefault();
}
}
</script>
my html
<a title="View Log" onclick="return confirmDel(this);" href="index.php?mod=tech_support">delete</a>
above code works fine in chrome browser but fails in Mozilla .
but when i use return false instead of event.preventDefault(); it works fine in both.
can anyone explain why this happens

The problem is with event.preventDefault(). The event you're passing is evt, not event. You have to use:
evt.preventDefault();
event.preventDefault() works in Chrome because it mimics old IE behavior for backwards compatibility (just like it also has innerText).
In old IE, the event object was window.event. So calling event.preventDefault() calls the global event object, which works in Chrome and IE, but not Firefox which doesn't implement this non-standard behavior.

`return false` in an event handler attached by addEventListener or element.on*

Right let’s get this out the way first. Yes, I want to hide the context menu. No, I’m not trying to prevent someone lifting content off my page. Its intended use is input for an in-browser game and it will be limited to a specific area on the webpage.
Moving from the ideological to the technical...
var mouse_input = function (evt) {
// ...
return false;
}
document.onmousedown = mouse_input; // successful at preventing the menu.
document.addEventListener('mousedown', mouse_input, true); // unsuccessful
Could someone explain to me why the addEventListener version is unable to stop the context menu from firing? The only difference I was able to see in Safari's Web Inspector was that document.onmousedown had a isAttribute value that was true whilst the addEventListener version had the same value as false.

So my unfruitful search suddenly became fruitful.
var mouse_input = function (evt) {
evt.preventDefault();
}
document.addEventListener('contextmenu', mouse_input, false);
Works for Safari, Firefox, Opera. preventDefault() stops the usual actions from happening. I had to change the event that was listened for to accommodate for Safari and it is more logical anyway. Further information: functions that implement EventListener shouldn’t return values so return false had no effect.

To explain the difference .. element.onmousedown = somefunction; is an absolute assignment; you are replacing the event handler on the element. element.addEventListener(...) is, as the name implies, adding a handler in addition to any handler(s) already attached for the event.

keydown EventListener in IE7

I've written this code inside the HEAD tags of my HTML page. It works fine in Firefox, Chrome and Safari, but doesn't in IE7. I would like to know how to fix it.
<script type="text/javascript">
if ( window.addEventListener ) {
window.addEventListener("keydown", function(e) {
alert(e.keyCode);
}, true);
}
</script>

Microsoft has implemented their own way of doing this called attachEvent. You can read more about this over at quirksmode.org: http://www.quirksmode.org/js/events_advanced.html

You're screwed: you're using event capturing (passing true as the last parameter to addEventListener). IE has no such equivalent, in any version, including IE8 in IE8 mode.
Is there a reason you must use event capturing rather that event bubbling here? IOW, pass false as your last parameter? Then, you'd be able to port this (somewhat) to use IE's attachEvent proprietary method, or use a library (as others have suggested and added links for).

There is no window.addEventListener in IE, you need to use attachEvent. There's good documentation on events here, or you could switch to using a library that abstracts away browser differences.

Try:
window.attachEvent
More fully:
//set page event handlers
if (window.attachEvent) {
//IE and Opera
window.attachEvent("keydown", "");
} else if (window.addEventListener) {
// IE 6
window.addEventListener("keydown", "");
} else {
//FireFox
document.addEventListener("keydown", "");
}