Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Unexpected access to "event" variable across browsers?

Let me begin by saying I understand that the below code has a major issue. Specifically, the event parameter is not passed into the function. What I don't understand is why in the below code Chrome, Opera, Safari, Firefox, and IE all treat the event variable differently.

$('#eventBtn').on('click', function() {
    console.log(event);
    event.preventDefault();
});

In Chrome, Opera, and Safari the above code works. IE fails at the second line and Firefox fails immediately. For testing purposes I have created a slightly more embellished jsFiddle. The output of the above console.log(event) in the various browsers:

Chrome Version 26.0.1410.64 m
MouseEvent {dataTransfer: null, toElement: button#superBtn, fromElement: null, y: 20, x: 33…}

Opera Version 12.15
MouseEvent

Safari Version 6.0.2 (8536.26.17)
MouseEvent

IE Version 10.0.9200.16540
[object MSEventObj]

Firefox Version 20.0.1
ReferenceError: event is not defined

I was bit by this "feature" of Chrome, Opera, and Safari because it worked as intended not as coded creating unexpected behavior in other browsers. While IE also has a global event variable, unlike the aforementioned browsers it does not assign that variable to the event that is currently firing. Firefox does not have a global event variable and therefore fails as soon as event is referenced.

Typically I use e for representing event variables which as expected fails the same way in all browsers. Why do Chrome, Opera and Safari have a global event variable which they assign this way? Is this behavior documented somewhere? Aside from don't use event for variable naming any advice for dealing with this "feature"?

like image 220
ahsteele Avatar asked Apr 30 '13 18:04

ahsteele


People also ask

How do I know if my browser is closed or tab closed?

A tab or window closing in a browser can be detected by using the beforeunload event. This can be used to alert the user in case some data is unsaved on the page, or the user has mistakenly navigated away from the current page by closing the tab or the browser.

What is globalThis?

The globalThis property provides a standard way of accessing the global this value (and hence the global object itself) across environments. Unlike similar properties such as window and self , it's guaranteed to work in window and non-window contexts.

How can I tell if my back button is pressed in my phone?

One option is to use jquery mobile. According to this source, to detect the 'back' key, KEYCODE_BACK = 4 on Android.


1 Answers

IE has always provided a global event variable, unlike what the W3C standards dictate. The other browsers are doing the same in order to provide backward-compatibility with websites developed with old IE versions in mind.

While IE also has a global event variable, unlike the aforementioned browsers it does not assign that variable to the event that is currently firing.

I believe it does.

like image 68
bfavaretto Avatar answered Oct 17 '22 00:10

bfavaretto