1

I'm trying to get IE8 support in a project of mine and having a tough time converting addEventListener to addEvent (from: http://ejohn.org/projects/flexible-javascript-events/)

So, with his code I have an event setup like (source here): 

_addEvent(eventableIframes[i], 'mousemove', function (e) { utilBarHandler(e); });

However, when it gets to utilBarHandler, "e" is null and IE8 gives me an "object required" error here on line 783. I'm assuming the object required is the event object since its literally just null when I log out e at the top of the function.

Also, this happens for every event in that loop that requires the event object such as shortcutHandler and shortcutUpHandler.

Update: just in case people are missing it, this post has a bunch of links that highlight specific lines.

Improve this question

2 Answers 2

Reset to default
2

Not all versions of IE pass the event as an argument. It's in window.event. You can add this to your _addEvent shim or to your event handler:

 e = e || window.event

as in:

_addEvent(eventableIframes[i], 'mousemove', function (e) { e = e || window.event; utilBarHandler(e); });

which will work in either IE or others.

Here's two flavors of a cross browser event handling that makes sure both the event and the this pointer are set appropriately in IE:

// add event cross browser function addEvent(elem, event, fn) { if (elem.addEventListener) { elem.addEventListener(event, fn, false); } else { elem.attachEvent("on" + event, function() { // set the this pointer same as addEventListener when fn is called return(fn.call(elem, window.event)); }); } } // refined add event cross browser function addEvent(elem, event, fn) { // avoid memory overhead of new anonymous functions for every event handler that's installed // by using local functions function listenHandler(e) { var ret = fn.apply(this, arguments); if (ret === false) { e.stopPropagation(); e.preventDefault(); } return(ret); } function attachHandler() { // set the this pointer same as addEventListener when fn is called // and make sure the event is passed to the fn also so that works the same too var ret = fn.call(elem, window.event); if (ret === false) { window.event.returnValue = false; window.event.cancelBubble = true; } return(ret); } if (elem.addEventListener) { elem.addEventListener(event, listenHandler, false); } else { elem.attachEvent("on" + event, attachHandler); } }
Improve this answer
Sign up to request clarification or add additional context in comments.

13 Comments

Hmm, so I tried your first simple example and it didn't work. Same null issue. I also put e = e || window.event as you said and I'm still seeing e as null. I put a console.log above e = e || window.event and below it to see if it changed anything and it didn't. Maybe this is a different issue?
FYI, you can see the result here: img.skitch.com/20120812-xs9b3u4djqjjftuw4k72buy3hp.png
@OscarGodson - you'll have to show the full piece of code. Your screen shot just shows utilBarHandler, but not how it's hooked up to the event and also we don't have the code for your _addEvent() function.
All the code is linked above in my OP. I link to specific lines as well as the whole file. You can clone the repo too if you want to see it in action. The screenshot was just showing the small example.
@OscarGodson - I don't know. There's something screwy, but I don't see exactly what it is. I'd have to have an actual web page with the non-working code in it that I could step through in IE to offer further info. I'd suggest you isolate the issue to a very small piece of code in a jsFiddle. If that doesn't help you figure out yourself where the problem is, then you can post the jsFiddle here for us to debug ourselves. FYI that Resig event handling code is pretty old (2005) and designed to work in obsolete browsers (like IE5). Simpler things will work today.
|
0

The quick and dirty fix that @jfriend00 suggested, e = e || window.event, was 99% the way there but I was still having issues. After more fiddling I found the answer. I didn't want window.event because it was an iframe. Instead I wanted iframeElement.contentWindow. Adding it into my callbacks like this did the trick:

_addEvent(eventableIframes[i], 'mousemove', function (e) { // self.iframeElement == <iframe> e = e || self.iframeElement.contentWindow; utilBarHandler(e); });
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.