Member Avatar for odee

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

  • 7 Contributors
  • 11 Replies
  • 386 Views
  • 4 Years Discussion Span
  • Latest Post Latest Post by Troy III

Dani AI

Generated

Quick summary for (and everyone following this thread): clientX / clientY are MouseEvent properties that report the pointer position relative to the viewport (not the whole screen). Old IE exposed the current event as window.event; Firefox and standards-based browsers pass the event object into the handler. Crucially, the browser chrome (the close button, refresh button, etc.) does not generate a MouseEvent inside the page, so reading clientX during unload/beforeunload often yields undefined or meaningless values. That explains the differences and others have pointed out.

If you need correct mouse coordinates for mouse interactions (click, mousedown, mousemove), use a small cross-browser helper that prefers pageX/pageY and falls back to clientX plus scroll offsets:

function getMousePos(evt) {
  evt = evt || window.event;
  var x = (typeof evt.pageX !== "undefined")
          ? evt.pageX
          : evt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft || 0);
  var y = (typeof evt.pageY !== "undefined")
          ? evt.pageY
          : evt.clientY + (document.documentElement.scrollTop  || document.body.scrollTop  || 0);
  return { x: x, y: y };
}

Attach that helper to actual mouse events (click/mousedown/mousemove). Do not expect it to work inside onunload to detect the close-button location.

For : trying to pop up a custom message on window close by checking mouse coords is fragile. If you need to warn users or persist state, use the page lifecycle hooks (for example beforeunload) or save state continuously (localStorage / AJAX) as the user works. You cannot reliably distinguish "refresh" from "close" using mouse coordinates.

Debug tips: log the event object in the console to inspect available properties, test with clicks inside the document (not chrome), and attach listeners with addEventListener (or attachEvent for very old IE). As noted, refresh triggers the same unload sequence, so design around that.

Recommended Answers

All 11 Replies

Member Avatar for tgreer

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.

Member Avatar for ramesh_karanam

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

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

Member Avatar for tgreer

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.

Member Avatar for ramesh_karanam

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

Member Avatar for tgreer

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>
Member Avatar for unicorn11

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>
Member Avatar for alpha_foobar

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.

Member Avatar for alpha_foobar

wow, this thread is old...

Member Avatar for tgreer

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

Member Avatar for suneelmishra

<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>

Member Avatar for Troy III

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

Edited by Troy III because: n/a
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.