Free Javascript Tutorials
home Stay at Home and Learn

JavaScript Tutorials

Events
 
Our quick javascript links
Little Programmes
 
 
 
 
 
 

 

JavaScript Events - OnMouseDown

 

What we'll do in the pages that follow is to detect the position of the mouse pointer when the user clicks on the screen. To do that, you need to find the X coordinate and the Y coordinate.

  • The X coordinate tells you how far left of the screen you are
  • The Y coordinate tells you how far down the screen you are.

Both Netscape and Internet Explorer use the screenX and screenY property. If you're sure that your users will all have Internet Explorer, then the task is fairly easy. Here's the script:

<HEAD>
<TITLE>XY Coordinates</TITLE>

<SCRIPT Language = javascript>

function XYpos() {
xPos = event.screenX
yPos = event.screenY
alert(xPos + " left " + yPos + " down")
}

</Script>

</HEAD>

<BODY onMouseDown = XYpos()>

You can click the link below to see what the script does (opens in a new window):

Click here to see the script in action

The BODY section of the HTML is where we put the event handler onMouseDown. Now, every time the mouse is clicked anywhere in the Body of the web page, the function XYpos() gets called.

Inside the function, the property screenX and the property screenY (which are both properties of event) are put inside two variables:

xPos = event.screenX
yPos = event.screenY

So xPos will hold how far left the mouse pointer is when the page is clicked; and yPos will hold far down the mouse pointer is when the page is clicked.

Both coordinates are then displayed in an alert box:

alert(xPos + " left " + yPos + " down")

If you have Netscape, however, the code will point blank refuse to work!

If we add our Browser detector code to the script above, though, we can get Netscape to display an error message. Try changing you code to this:

<Script language = javascript>
Browser = navigator.appName
Net = Browser.indexOf("Netscape")
Micro = Browser.indexOf("Microsoft")

Netscape = false
IE = false

if(Net >= 0) {
Netscape = true
}

if(Micro >= 0) {
IE = true
}

function XYpos() {
if (IE == true) {
xPos = event.screenX
yPos = event.screenY
alert(xPos + " left " + yPos + " down")
}
else if (Netscape == true) {
alert("Script won't work: " + "\n" + "You're using Netscape")
}
}
</script>

Click here to try the script out (especially if you have Netscape/Mozilla)

After the browser detection code, we've added our XYpos() function. This time, we've put some if statements in it. If the user has Internet Explorer, we're all right; if the user has Netscape, display the message:

function XYpos() {
if (IE == true) {
xPos = event.screenX
yPos = event.screenY
alert(xPos + " left " + yPos + " down")
}
else if (Netscape == true) {
alert("Script only works with Internet Explorer - sorry!")
}
}

So Internet Explorer's way to get the coordinates of the mouse pointer is not too difficult. The reason why the script is so long is simply because Netscape refuses to cooperate. We therefore have to add browser detection code and do one thing for Internet Explorer and do another thing for Netscape.

If you want to detect the mousedown event with Netscape then the process is quite complicated. We won't go into here, but you can click the link below to see the script in action. To view the source code, click View > Source in Internet Explorer. Netscape/Mozilla users should click View > Page Source. When you see the code, you'll know why we didn't go into it!

Click here to see the Netscape/Mozilla version

But that's enough of complicated events. I'm sure you've had your fill. In the next part, we'll take a look at some simple events, as we go through the list.

(Shawn sent me the following in an email, for which I thank him. This works in both IE and FireFox/Mozilla. Try it, if you have both browsers:

function XYpos(event){
alert(event.screenX + " left " + event.screenY + " down")
}

<body onClick= XYpos(event) bgcolor = white>

As he says, Much simpler!)

Move on to the Next Part-->

<--Back to the JavaScript Contents Page