Event Example: Use Page Position on Click

The combination of the Event Utility and the Dom Collection makes it really easy to do what Michael asks for in this YDN-JavaScript post: Namely, to get the mouse coordinates during a click and make an arbitrary piece of content appear next to where the mouse is located. Click anywhere on this page to see the effect in action.

Start with some simple CSS code for the appearing elements, which will be positioned absolutely, outside of the page flow:

<style type="text/css">
.flying-label {
	position:absolute;
	border:1px solid blue;
	background-color:#99CCFF;
}
</style>

Next, listen for a click anywhere on the page. When that event happens, create (if necessary) the content you want to position and then, in line 11 below, use the combination of Dom and Event to getXY using Event on the event object and feed those coordinates into a setXY on the new element using Dom.

	function init(){
		YAHOO.util.Event.addListener(document, 'click', fnClick);
	}
	function fnClick(e){
		var root = YAHOO.util.Dom.get("labels");
		var newDiv = document.createElement("div");
		var newText = document.createTextNode("appears adjacent to mouse position");
		newDiv.appendChild(newText);
		root.appendChild(newDiv);
		YAHOO.util.Dom.addClass(newDiv, "flying-label");
		YAHOO.util.Dom.setXY(newDiv, YAHOO.util.Event.getXY(e));
	}
	
	YAHOO.util.Event.addListener(window, 'load', init);

— Eric Miraglia, Yahoo Presentation Platform Engineering