Test for mouseover of foreign object?

Forum Moderators: open

Message Too Old, No Replies

Test for mouseover of foreign object?

mousover,test,javascript,other object

frobozz

10:47 pm on Nov 8, 2007 (gmt 0)

Is it possible to test for a mouseover event on an object OTHER than the current object?

I need to write a piece of code that does this:

if (mouse is currently over document.getElementById('name')) { do this }

Maybe something like this:

if (mouseover.document.getElementById('name')) ...?

Is this possible? Ideally I'd like to use mouseover and mouseout like this, rather than having to attach the event to numerous individual elements.

Dabrowski

11:21 pm on Nov 8, 2007 (gmt 0)

Hmmm, I think you need to make use of event 'bubbling'. Don't really know much about it sorry, but I know at least 1 person here who will.

Fotiman

2:28 pm on Nov 9, 2007 (gmt 0)

As Dabrowski pointed out, you'll need to attach your listener to a parent of the item you're concerned about, and then when the event bubbles up to that parent, check to see if the target is the one you're concerned about.

Here's an example which uses the Yahoo UI Library [developer.yahoo.com]'s Event Utility (much easier than writing your own). This will work cross-browser.

In this example, if you mouse over any of the links, the parent ('container') is going to check the target of the event (ie - who fired it). In my example, if it was 'Foo', you'll get a different message than you would on the other links.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset:utf-8"> 
<title></title> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascript"> 
// Once the page loads, attach our listeners 
YAHOO.util.Event.on(window, 'load', function() { 
 var foo = document.getElementById('foo'); 
 // Attach a listener to 'container' 
 YAHOO.util.Event.on('container', 'mouseover', function(e) { 
  if (YAHOO.util.Event.getTarget(e) == foo) { 
   alert('Foooey!'); 
  } 
  else { 
   alert('No Foo for you!'); 
  } 
 }); 
}); 
</script> 
</head> 
<body> 
<div id="container"> 
 <a href="#" id="foo">Foo</a> 
 <a href="#" id="bar">Bar</a> 
 <a href="#" id="baz">Baz</a> 
</div> 
</body> 
</html>

[edited by: Fotiman at 2:31 pm (utc) on Nov. 9, 2007]

XtendScott

2:33 pm on Nov 9, 2007 (gmt 0)

I do pretty much what you are asking with a "?" icon for user information via a pop up help div.

I setup a global mouseover event and then check to see if there is anything that needs to happen within a case statement.

document.onmouseover = checkMouseOver;function checkMouseOver() {
 var eSrc = event.srcElement
 switch(eSrc.tagName)
 {
 case "IMG":
if(eSrc.className == 'helpIcon'){
 window.status = eSrc.helpID;
 pmpHelp(eSrc.helpID,'on')
}
 
 break;
 case "DIV":
 break; default:
  
  break;
 }
// IF Help window is ON, close it when something else happens
if(document.getElementById("popHelp").style.display!== "none"){
 fade("popHelp","out");
}
}

not sure how the code will be formated above.

if you only need a small area kept track of a small area of the screen, put a onmouseover event to call the function on a containing div or element.

<added>The "event.srcElement" I believe is IE only, sorry I prgram on IE only Intranet but this should be a start</added>

[edited by: XtendScott at 2:44 pm (utc) on Nov. 9, 2007]