Mouse Event Properties are Undefined on IE 11
Asked Answered
M

2

7

The following code I'm using to Identify the browser window close event and works as intended on other browsers but not on IE11. As this line of code gives me undefined only on IE11 alert(event.clientY+":"+event.clientX);.Can anyone please suggest a solution to this problem.

window.onbeforeunload = function(event) 
{
event= window.event|| event;
alert(event);
alert(event.clientY+":"+event.clientX);

    if(event.clientX <0 || event.clientY < 0)
    {   
        // ajax call to server to nullify the session.
        window.close();
    }
};
Magisterial answered 18/12, 2015 at 7:37 Comment(3)
Possible duplicate of pageX pageY not working in IE8 if i add <!DOCTYPE html>Eulogistic
No, my question is for IE 11 and not for IE8Magisterial
So... What should happen if my cursor is in the middle of the screen and I hit Alt+F4?Knee
J
1

From MDN beforeunload event you may see what properties are supported from event object.

The clientX and clientY of the event object are not supported so they are undefined.

This happens also in Chrome and FF because the onbeforeunload event does not contain such information (positional X and Y)

I tested your code in IE11, Chrome 48, FF 44.

A possible workaround coud be:

var clientX = 0;
var clientY = 0;
var scheduled = false;

window.onmousemove = function (event) {
  if (!scheduled) {
    scheduled = true;
    setTimeout(function () {
      event = event || window.event;
      clientX = event.clientX;
      clientY = event.clientY;
      scheduled = false;
    }, 1000);
  }
}

window.onbeforeunload = function (event) {
  alert(clientY+":"+clientX);
  if (clientX < 0 || clientY < 0) {
    // ajax call to server to nullify the session.
    window.close();
  }
};
Joule answered 20/2, 2016 at 11:42 Comment(0)
E
1

The event object is defined twice:

event = window.event || event;

but the reference is not used here:

if(window.event.clientX < 0 || window.event.clientY < 0)

so IE fails because the code should be:

if(event.clientX < 0 || event.clientY < 0)
Eulogistic answered 20/2, 2016 at 11:27 Comment(1)
@psyLogic gaemaf answered the beforeUnload part of the question.Eulogistic
J
1

From MDN beforeunload event you may see what properties are supported from event object.

The clientX and clientY of the event object are not supported so they are undefined.

This happens also in Chrome and FF because the onbeforeunload event does not contain such information (positional X and Y)

I tested your code in IE11, Chrome 48, FF 44.

A possible workaround coud be:

var clientX = 0;
var clientY = 0;
var scheduled = false;

window.onmousemove = function (event) {
  if (!scheduled) {
    scheduled = true;
    setTimeout(function () {
      event = event || window.event;
      clientX = event.clientX;
      clientY = event.clientY;
      scheduled = false;
    }, 1000);
  }
}

window.onbeforeunload = function (event) {
  alert(clientY+":"+clientX);
  if (clientX < 0 || clientY < 0) {
    // ajax call to server to nullify the session.
    window.close();
  }
};
Joule answered 20/2, 2016 at 11:42 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.