This code creates a webpage with an html div containing the words ONE TWo THREE. A Java Script function uses the event object's clientX and clientY properties to determine which word the user clicked on and displays it in a message box.
Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Where Did the User Click?

Pixel Locations

An image on a computer screen is made up of "pixels" (colored dots). The computer screen itself consists of an array of pixels. The location of every pixel can be described by a pair of digits representing its X location and its Y location. A pixels X location is its distance in pixels from the left side of the screen. A pixels Y location is its distance in pixels from the top the screen.

- If your screen resolution is set to 800 x 600 pixels, a pixel at the center of your screen would be located at X=400, Y=300.

A browser window uses the same coordinate system. Let's say you open a browser window 400 pixels by 400 pixels and center it on your screen. The location of a pixel at the center of the browser window would be X=200, Y=200. That is, the pixel is located 200 pixels from the left side of the browser window and 200 pixels from the top the browser window.

Because the browser window is not maximized, the browser window location and the screen location of the pixel would not be identical. Since we said the browser window was centered on the screen, the screen pixel location would be X=400, Y=300.

Browser Objects

On a webpage you might find buttons, checkboxes, links, text, and so on. Almost everything on a webpage is an "object". Almost all objects can respond to an "event". An event can be triggered by the user. For example, an "onClick" event is triggered when the user clicks a mouse button.

Both the W3C and the Internet Explorer models have an "event" object that is triggered by any event occurring in the browser. Although the properties of the two models differ in a number of ways, both provide properties that you can use to determine the location of an invent in the browser window and on the computers screen.

Properties of the event object
clientXX location in the browser window
clientYY location in the browser window
ScreenXX location on the screen
ScreenYY location on the screen

To experiment with the event object, type the code shown below into Windows Note pad or your favorite plain ASCII text editor and save the file with the name client.htm.


<script language="JavaScript">
function position(e)
document.forms(0).position.value = e.clientX +
" " + e.clientY;

<body onmousedown="position(event)">

<input type="text" name="position"></input>


This code creates a webpage with a text box. A Java Script function named "position" puts the event object's clientX and clientY properties in the text box. In the body tag, the position function is attached to the body's onmousedown event.

When you open the webpage in your browser and click anywhere in the webpage, the browser window pixel location where you clicked will be displayed in the text box.

A simple change to the line of code inside the position function as shown below causes it to display the screen location where you clicked.

document.forms(0).position.value = e.screenX +
" " + e.screenY;

Note: You still have to click inside the browser window. If you click outside the browser window, the body's onclick event can't see the click event (but the Windows operating system received it).

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268