skaterdav85 Posted January 28, 2009 Share Posted January 28, 2009 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 More sharing options...
jeffman Posted January 29, 2009 Share Posted January 29, 2009 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 More sharing options...
jesh Posted January 29, 2009 Share Posted January 29, 2009 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.