onmouseover not working in IE7

[donH]

Below is a snippet of code from a lengthy javascript procedure that builds a new table. It puts an "onmouseove r" function call on one of the TD elements. This code works in IE6, Firefox, and Safari. But in IE7, the onmouseover function does not seem to get called when I just move the mouse over the TD. If, however, I actually click the mouse while over the TD, the function does get invoked. Because of this, it seems to me that the setup of the onmouseover event must be working (or else the function wouldn't get called at all), but for some reason just "mousing over" the TD doesn't trigger the event.

Is this some obscure IE setting? Or something else? Help, anyone? Thanks.

...[code=javascript]
nameTD.onmouseo ver = function() {mouseOverTeam( shortteam, this);}
nameTD.onmouseo ut = function() {mouseOffTeam(s hortteam, this);}[/code]

...

[pbmods]

Heya, Don. Welcome to TSDN!

Please use CODE tags when posting source code:

[CODE=javas cript]
JavaScript code goes here.
[/CODE]

[dmjpro]

Below is a snippet of code from a lengthy javascript procedure that builds a new table. It puts an "onmouseove r" function call on one of the TD elements. This code works in IE6, Firefox, and Safari. But in IE7, the onmouseover function does not seem to get called when I just move the mouse over the TD. If, however, I actually click the mouse while over the TD, the function does get invoked. Because of this, it seems to me that the setup of the onmouseover event must be working (or else the function wouldn't get called at all), but for some reason just "mousing over" the TD doesn't trigger the event.

Is this some obscure IE setting? Or something else? Help, anyone? Thanks.

...[code=javascript]
nameTD.onmouseo ver = function() {mouseOverTeam( shortteam, this);}
nameTD.onmouseo ut = function() {mouseOffTeam(s hortteam, this);}[/code]

...

Use "addEventListne r" (in case of IE) or "attachEventLis tener" (in case of Mozilla or Safari).
For details information do Google with it.

Debasis Jana

[acoder]

Have a look at this article.

What does mouseOverTeam do?

[acoder]

Use "addEventListne r" (in case of IE) or "attachEventLis tener" (in case of Mozilla or Safari).

Not quite. That would be addEventListene r for the standards-compliant browsers and attachEvent for IE.

[donH]

Thanks for this info... I apologize for neglecting to use the CODE tags... the guidelines are really very clear! My bad.

[donH]

acoder and dmjpro:

thanks to you both for the helpful responses...
I had seen another thread that talked about a problem in IE where the EventListener hadn't worked for mouseover, and so the poster had found that using the older "onmouseove r" method was the only way to make it work in IE. Now I think that probably the reason that poster had a problem is the discrepancy you note between the appropriate methods for IE vs. <Rest of World>. The article you referred me to is very helpful.

To answer your question, acoder, the function that is called simply highlights or un-highlights (changes the background color) of particular cells in another table on the page. This is a local sports league site, and as you mouse over each team in the list of teams, that team's matches in a table of all matches gets highlighted.

[acoder]

Can you show some more code or a link?

[capnhairdo]

I have experienced this same problem recently. I have a JS function I wrote and have used for years that, on page load, dynamically attaches hover functions (changing the image src) to the onmouseover and onmouseout events of certain images. (A much cleaner way than littering your HTML with messy, verbose inline onmouseover/onmouseout events.) As far as I can recall, it's always worked in all browsers...unti l today.

For some reason, in IE7, a set of images weren't working with this function. No errors; it just seemed like the onmouseover event wasn't firing at all.

I had seen another thread that talked about a problem in IE where the EventListener hadn't worked for mouseover, and so the poster had found that using the older "onmouseove r" method was the only way to make it work in IE.

I just tried this method, and sure enough, it fixed the problem. Strange.

Now I think that probably the reason that poster had a problem is the discrepancy you note between the appropriate methods for IE vs. <Rest of World>.

Here's the function I was using to attach the hover functions to the events (from dustindiaz.com ):
[HTML]
function addEvent(elm, evType, fn, useCapture) {
if (elm.addEventLi stener) {
elm.addEventLis tener(evType, fn, useCapture);
return true;
}
else if (elm.attachEven t) {
var r = elm.attachEvent ('on' + evType, fn);
return r;
}
else {
elm['on' + evType] = fn;
}
}[/HTML]

Then I tried replacing it with this (supposedly more robust) addEvent function (also from dustindiaz.com):

[HTML]function addEvent( obj, type, fn ) {
if (obj.addEventLi stener) {
obj.addEventLis tener( type, fn, false );
}
else if (obj.attachEven t) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent ( "on"+type, obj[type+fn] );
}
else {
obj["on"+type] = obj["e"+type+fn];
}
}[/HTML]

For some reason, that also fixed the problem. Not sure why that worked better than the other addEvent(), but it did.

So this seems to confirm that attaching events in IE is not all that simple, straightforward and reliable.

Cameron

[acoder]

Cameron, welcome to Bytes and thanks for posting.

Unfortunately, there are a lot of problems with the IE model including the loss of "this" and memory leaks. There are a lot of addEvent functions floating about that try to solve these problems.

[Jeremiah Burke]

I had this same issue. After tinkering I found the line failed in IE7 because of the double quotes. I replaced with single quotes, then it ran perfectly.

Before:
obj.attachEvent ( "on"+type, obj[type+fn] );

After:
obj.attachEvent ( 'on'+type, obj[type+fn] );