Jump to content

Event Object & Clientx Clienty Properties

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 post
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 post
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";}


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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...