why does the event.clientX and event.clientY is working in IE but not work in firefox?

clientX and clientY shows the coordinate of the cursor relative to the screen

Recommended Answers

All 11 Replies

Because the event object model is different in FireFox. Instead of using the IE Dom, you need to use the W3C Dom.

Let me know if you need more specific help.

So how to know the equivalent values in firefox ....

I'm having a requirement where I need to get the co-ordinates.

They are properties of the Event Object. From the www.w3.org:

// Introduced in DOM Level 2:
interface MouseEvent : UIEvent {
  readonly attribute long             screenX;
  readonly attribute long             screenY;
  readonly attribute long             clientX;
  readonly attribute long             clientY;
  readonly attribute boolean          ctrlKey;
  readonly attribute boolean          shiftKey;
  readonly attribute boolean          altKey;
  readonly attribute boolean          metaKey;
  readonly attribute unsigned short   button;
  readonly attribute EventTarget      relatedTarget;
  void               initMouseEvent(in DOMString typeArg, 
                                    in boolean canBubbleArg, 
                                    in boolean cancelableArg, 
                                    in views::AbstractView viewArg, 
                                    in long detailArg, 
                                    in long screenXArg, 
                                    in long screenYArg, 
                                    in long clientXArg, 
                                    in long clientYArg, 
                                    in boolean ctrlKeyArg, 
                                    in boolean altKeyArg, 
                                    in boolean shiftKeyArg, 
                                    in boolean metaKeyArg, 
                                    in unsigned short buttonArg, 
                                    in EventTarget relatedTargetArg);
};

So "event.clientX' should work, depending on how you are getting the "Event" object.

Thanks for the reply Greer...

But, my requirement is to show a pop-up if on close of the browser window. The below sample script is working well in IE but not in FireFox.

Could you please let me know the solution for Firefox .....

<html><head><title>Test</title> 
<script language ="Javascript"> 
 
function unLoadFnc(event) 
{
 if(window.event.clientX<-2000 && window.event.clientY<-2000)
 {
  alert("Closing the window .. ");
 }
 else
 {
  alert("Something else..");
 }
}
 
</script> 
</head> 
<body onUnload="unLoadFnc(event)"> 
Sample Html. 
</body> 
</html>

Regards,
Ramesh

There is quite a bit wrong in your code. First, you absolutely don't need to measure any mouse position or x,y coordinates do what you've asked.

This will work to create an alert when the user closes the window:

<!-- note: you're missing a doctype here! -->
<html>
<head>
<title>Test</title> 
<script type="text/javascript"> 
 
function unLoadFnc() 
{
  alert("Closing the window .. ");
}
 </script> 
</head> 
<body onUnload="unLoadFnc();"> 
Sample Html. 
</body> 
</html>

There's no need for events, clientX, any of that. Perhaps though, you're not showing me the entire script or explaining the entire project. So, in the case that you DO need the event, you need to test if it's part of the window object (IE) or not.

Here's how I would code it:

<!-- doctype excluded, you need to pick one -->
<html>
<head>
<title>Test</title>

<script type="text/javascript">
function unLoadFnc(evt)
{
  var e = (window.event) ? window.event : evt;
  alert(e.clientX);
}
</script>
</head>

<body onUnload="unLoadFnc(event);">

Sample Html.
</body>
</html>

I hope you're noting a few things, such as the fact that your page needs a doctype declaration, the proper way to write a script tag, and the semicolon after your event handler assignment.

The goal is to pass in the event object, and in your function, create a variable to hold it, using the tertiary operator.

Note, in FireFox, if you ran this code, the alert would say "undefined". That's because the widget that closes the window (the 'X') isn't within the client, so clientX would be undefined.

You'd actually have to click something in the client area to get a value.

For example, a button:

<!-- doctype excluded, you need to pick one -->
<html>
<head>
<title>Test</title>

<script type="text/javascript">
function unLoadFnc(evt)
{
  var e = (window.event) ? window.event : evt;
  alert(e.clientX);
}
</script>
</head>
<body>
Sample Html.
<form>
<input type="button" onclick="unLoadFnc(event);" />
</form>

</body>
</html>

the problem with this page is that the event that you have fired happens even if the page is refreshed. and he does not what that to happen. he wants to call the event only when the browser window is shut

There is quite a bit wrong in your code. First, you absolutely don't need to measure any mouse position or x,y coordinates do what you've asked.

This will work to create an alert when the user closes the window:

<!-- note: you're missing a doctype here! -->
<html>
<head>
<title>Test</title> 
<script type="text/javascript"> 
 
function unLoadFnc() 
{
  alert("Closing the window .. ");
}
 </script> 
</head> 
<body onUnload="unLoadFnc();"> 
Sample Html. 
</body> 
</html>

There's no need for events, clientX, any of that. Perhaps though, you're not showing me the entire script or explaining the entire project. So, in the case that you DO need the event, you need to test if it's part of the window object (IE) or not.

Here's how I would code it:

<!-- doctype excluded, you need to pick one -->
<html>
<head>
<title>Test</title>

<script type="text/javascript">
function unLoadFnc(evt)
{
  var e = (window.event) ? window.event : evt;
  alert(e.clientX);
}
</script>
</head>

<body onUnload="unLoadFnc(event);">

Sample Html.
</body>
</html>

I hope you're noting a few things, such as the fact that your page needs a doctype declaration, the proper way to write a script tag, and the semicolon after your event handler assignment.

The goal is to pass in the event object, and in your function, create a variable to hold it, using the tertiary operator.

Note, in FireFox, if you ran this code, the alert would say "undefined". That's because the widget that closes the window (the 'X') isn't within the client, so clientX would be undefined.

You'd actually have to click something in the client area to get a value.

For example, a button:

<!-- doctype excluded, you need to pick one -->
<html>
<head>
<title>Test</title>

<script type="text/javascript">
function unLoadFnc(evt)
{
  var e = (window.event) ? window.event : evt;
  alert(e.clientX);
}
</script>
</head>
<body>
Sample Html.
<form>
<input type="button" onclick="unLoadFnc(event);" />
</form>

</body>
</html>

Tgreer had more than one example.. if you read his comments and code you will learn much about event handling in mozilla.

To copy and paste, try the last example. to get the x and y coordinates, look at where tgreer posted the event object properties.

cheers.

wow, this thread is old...

Yeah... I wondered how/why it got bumped. No big deal.

<script language="JavaScript">
var mywords="Thank You For Visiting My Site!";
var speed = 1000;
var control = 1;
function my()
{
if (control == 1)
{
window.status=mywords;
control=0;
}
else
{
window.status="";
control=1;
}
setTimeout("my();",speed);
}
// -->
</script>

...............
sh. this thread is oldddd....

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.