Home arrow JavaScript arrow Page 6 - Handling events with the DOM - Part III
JAVASCRIPT

Handling events with the DOM - Part III


In this third part of our series, we will learn about Event objects, the "type" property, how to determine the target of an event, and more.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 14
May 03, 2005
TABLE OF CONTENTS:
  1. · Handling events with the DOM - Part III
  2. · Another creature in an object-based world: the Event object
  3. · Determining the type of event: the "type" property
  4. · Targeting objects: determining the target of the event
  5. · Focusing on keys: determining which key has been pressed
  6. · The x-y game: determining mouse coordinates
  7. · Buttons from the bottom: detecting mouse buttons

print this article
SEARCH DEVARTICLES

Handling events with the DOM - Part III - The x-y game: determining mouse coordinates
(Page 6 of 7 )

 

The process of finding mouse position is rather messy and unreliable, because there are six mouse coordinate properties pairs, but they are not really available cross-browser. Due to this fact, most of them are useless for implemented in reliable mouse position detection scripts. The list of properties is shown below:

 

  • clientX, clientY

  • layerX, layerY

  • offsetX, offsetY

  • pageX, pageY

  • screenX, screenY

  • x, y

 

From the above listed properties, the only ones present in most browsers are "screenX" and "screenY". They give the mouse position relative to the entire computer screen of the user. However, this information is rather useless for implementing within a script, since most of the time we need to know mouse coordinates relative to the document, not the screen itself. So, Id settle for just using the pairs "clientX, clientY" and "pageX, pageY" to determine mouse position in a cross browser manner. The JavaScript functionthat takes care of that might be coded as follows:

 

function detectMouseCoordinates(e){

    var posx,posy;

    posx=0;

    posy=0;

    if(!e) var e=window.event;

    if(e.pageX||e.pageY){

          posx=e.pageX;

          posy=e.pageY;

    }

    else if(e.clientX||e.clientY){

          posx = e.clientX + document.documentElement.scrollLeft;

          posy = e.clientY + document.documentElement.scrollTop;

    }

    alert('X='+posx+' Y='+posy);

}

 

Once weve listed the function, we would call it this way:

 

document.onmousedown=detectMouseCoordinates;

 

Please note that in the case of Mozilla and Netscape, the function will be executed whether were left or right clicking on the document. If were dealing with IE, which supports the "clientX, clientY" properties, we calculate mouse position by first obtaining the coordinates relative to the client area of the browser and then adding the "scrollLeft" and "scrollTop" values, relative to the document element.

 

As you can appreciate, mouse coordinate detection is quite difficult to do accurately, due to annoying browser inconsistencies.

 

Our next section deals with mouse button detection. Lets find out how it can be implemented in our JavaScript functions.

 


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials