pageX pageY not working in IE8 if i add <!DOCTY

2019-07-19 03:29发布

问题:

Hey guys i have the following script which gives me cursor position when i move the mouse . this script works fine in chrome,FF and even in IE 8(without !doctype html)

if add !DOCTYPE html to the html page. it gives me object doesnt support this property error. and the below given line is causing the problem

document.captureEvents(Event.MOUSEMOVE);

How can i fix this problem with !DOCTYPE html included in IE 8.

window.onload = init;
    function init() {
   if (window.Event) {
    document.captureEvents(Event.MOUSEMOVE);
   }
  document.onmousemove = getCursorXY;
    }

  function getCursorXY(e) {
      document.getElementById('cursorX').value = (window.Event) ? e.pageX :   
         event.clientX + (document.documentElement.scrollLeft ?    
       document.documentElement.scrollLeft : document.body.scrollLeft);
     document.getElementById('cursorY').value = (window.Event) ? e.pageY : event.clientY  
   + (document.documentElement.scrollTop ? document.documentElement.scrollTop :    
    document.body.scrollTop);
    }

回答1:

I assume you are receiving the error because <!DOCTYPE html> is the declaration for HTML5 and IE 8 won't be able to process HTML5.

Have you considered to switch to jQuery? It will have all the functions needed to achieve the same.



回答2:

Yes, not supported for IE9-. You can check these kinds of compatibility issues from this link. http://quirksmode.org/compatibility.html



回答3:

Use the IE DOM event equivalent to the W3C DOM event:

W3C DOM                   IE DOM
clientX                   (pageX - pageXOffset)
clientY                   (pageY - pageYOffset)
offsetX                   pageXOffset
offsetY                   pageYOffset

And switch via lazy evaluation with W3C as the default API:

 clientX || (pageX - pageXOffset);  

References

  • IE Event Object