Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

onMouseOut fires on any html element in its container?!?

Status
Not open for further replies.
MacTommy

MacTommy

Programmer
Feb 26, 2007
116
0
0
NL
How can I preventy onMouseOut event from firing when the cursor hovers over any other html-element inside that container..?!?
onMouseOver fires directly aftwards, but still...

For reference, I've got this code:
Code: 
<html>
<body>

<div id=myMenu
     onMouseOut="javascript:alert('onMouseOut')"
     onMouseOver="javascript: alert('onMouseOver')"
		  style="border: thin solid #000000">
Hallo			
</div>
<p>
<div id=myMenu
     onMouseOut="javascript:alert('onMouseOut')"
     onMouseOver="javascript: alert('onMouseOver')"
		  style="border: thin solid #000000">
<a href="...">Hallo</a>
</div>

</body>
</html>

The first div reacts as I would expect, the second fires an onMouseOut when you hover over the link, and an onMouseOver directly afterwards...

Is this a feature?!?
Am I missing something..?!?

Thanks!
 
Sort by date Sort by votes
MacTommy, there is probably a really long way round to cancel the event bubble however I personally would just remove any <a href...> and add an onclick event to another element. i.e.

Code: 
<html>
<body>

<div id=myMenu
     onMouseOut="javascript:alert('onMouseOut')"
     onMouseOver="javascript: alert('onMouseOver')"
          style="border: thin solid #000000">
Hallo            
</div>
<p>
<div id=myMenu
     onMouseOut="javascript:alert('onMouseOut')"
     onMouseOver="javascript: alert('onMouseOver')"
          style="border: thin solid #000000">
[COLOR=#ff0000][s]<a href="...">Hallo</a>[/s][/color]
<div onclick="document.location=''">Hello</div>
</div>

</body>
</html>

This is purely a workaround to get you on your way however maybe someone else will actually be able to resolve your problem.

Nick
 
Upvote 0 Downvote
cLFlaVA, you posted when I was writing mine and no one else had replied at that time. I was simply providing a strategic workaround, not a solution.

Nick
 
Upvote 0 Downvote
Thanks!

The the strange thing is however that the <div> solution doesn't really work with me.

If I hover over the text, it first gives an onMouseOver, then a an onMouseOut, and then a final onMouseOver...

It just seems to trigger on any arbitrary html-element there.
 
Upvote 0 Downvote
Upvote 0 Downvote
Which is by the way in Firefox 2.0.0.7 on Windows, and IE does something similar.

But is it the same with you guys or is it something special to me somehow?!?
Because it really confuses me that nobody seems to have major problems with it.
 
Upvote 0 Downvote
@ cLFlaVA: I don't think it has to do with clicking away the alert, because you can also just hit 'Enter'(without moving the mouse), and everything still reacts the same.

Probably, it rather has to do with the onMouseOut-event of the a tag that bubbles up, as adam0101 suggested.
Thanks adam0101!!
That link sheds some light on it!
Hadn't found it myself...
 
Upvote 0 Downvote
OK, sorry. My fault!
It didn't come acroos to me right away...
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid)
Replies
4
Views
267
Mike Lewis
Mike Lewis
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
183
xwb
xwb
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
154
lexer
lexer
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
176
Kennelbloke
Kennelbloke
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
155
malpa
malpa

Part and Inventory Search

Sponsor

Back
Top