Kieran: No, I haven't. I've avoided jQuery. It makes too much sense. :-p
d11wtq: I'm aware, but if I were to attempt to access any of their properties in the statement, it'd throw errors. So, I avoid it altogether.
Example:
Code: Select all
// This would throw an error in FF since it has no srcElement
eventHandler(e){ var id = e.srcElement.id || e.target.id; }
I've been debugging like a madman and have finally pinpointed the problem. The problem is in Internet Explorer's attachEvent. Apparently, it doesn't work the same as addEventListener.
Take this test class that I wrote to find the problem:
Code: Select all
function Foo(id)
{
this.__foo = document.getElementById(id);
this.__child = document.createElement('div');
this.__child.reference = this;
this.__child.style.width =
this.__child.style.height = '50%';
this.__child.style.margin = 'auto';
this.__child.style.border = '1px solid #000';
this.__foo.appendChild(this.__child);
if(!AddEvent(this.__child, 'click', this.Bar, true))
{
this.__child.onclick = this.Bar;
}
}
Foo.prototype.Bar = function(e)
{
if(!e)
{
e = window.event;
}
alert('this.reference: ' + this.reference + '\ne.target.reference: ' + (e.srcElement ? e.srcElement.reference : e.target.reference));
}
Here is the AddEvent() function:
Code: Select all
function AddEvent(object, evt, func, capture)
{
if(typeof func != 'function')
{
return false;
}
if(object.addEventListener)
{
object.addEventListener(evt, func, capture);
return true;
}
else if(object.attachEvent)
{
object.attachEvent('on' + evt, func);
return true;
}
return false;
}
So, when I create a "Foo" object, and click on the __child, here's what Bar alerts:
Firefox wrote:this.reference: [object Object]
e.target.reference: [object Object]
Internet Explorer wrote:this.reference: undefined
e.target.reference: [object Object]
So, when attachEvent occurs, the "this" keyword no longer refers to the element on which the event has occurred.
If I comment out the lines in AddEvent referring to attachEvent, thus making AddEvent return false in Internet Explorer, the event will be created use the age-old onmouseevent = doSomething.
Now, here's what Bar alerts:
Firefox wrote:this.reference: [object Object]
e.target.reference: [object Object]
Internet Explorer wrote:this.reference: [object Object]
e.target.reference: [object Object]
So, I've stopped using attachEvent, and now it works perfectly.
I don't like it though. I've been trying to play around with e.target and e.srcElement, and created a small GetEvent function that creates a pseudo srcElement in non-Microsoft browsers as e.target's value. I got that method to work up to an extent. Firstly, the sliders move much slower, and if I click on any of the elements inside of the slider (i.e., the bar div in the middle, the moving handle), it no longer responds as an action on the containing element, only the ACTUAL target/srcElement.
So, for now, IE will have to settle for me just.. not using attachEvent.