Jump to content

Event Object & Clientx Clienty Properties


skaterdav85
 Share

Recommended Posts

So i wrote a script where when a user mouses over a link, it shows a layer and the layer moves according to where the mouse is. Now this works fine in IE and Safari, but in FF, it only shows and hides the layer and FF spits an error saying 'event is not defined' on line 22. However, when you use "event" as an argument for 'moveLayer(event)', it works fine in all 3 browsers. Does anyone know why?

<html><head><style>#lay1 {border: 1px black solid;position:relative;top:200px;left:150px;z-index:1;background-color:red;width:100px;visibility:hidden;padding:5px;margin:5px;}</style><script type="text/javascript">function moveLayer(){  x=event.clientX;  y=event.clientY;  document.getElementById('lay1').style.top = y + 15 + "px";  document.getElementById('lay1').style.left = x - 50 + "px";}function layerVis(value) {document.getElementById('lay1').style.visibility=value;}</script></head><body><div id="lay1">hello world</div><center><a href="#" onMouseOver="layerVis('visible');" onMouseMove="moveLayer();" onMouseOut="layerVis('hidden');">LINK 1</a></center></body></html>

Link to comment
Share on other sites

IE and everyone else have always used a different event model. The IE model makes all events available globally in window.event. The Firefox model, in which the event is initially available only to the object it's triggered on (and so must be passed to other functions as an argument), is "correct." I guess Safari decided to go both ways, and Firefox is sticking to the standard.

Link to comment
Share on other sites

To get it working in Firefox, you can modify your code like so:

function moveLayer(e){  e = e || window.event;  x=e.clientX;  y=e.clientY;  document.getElementById('lay1').style.top = y + 15 + "px";  document.getElementById('lay1').style.left = x - 50 + "px";}

and:

<a href="#" onmouseover="layerVis('visible');" onmousemove="moveLayer(event);" onmouseout="layerVis('hidden');">LINK 1</a>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...