4

When I left-click and drag the mouse, IE9 doesn't recognize the mousemove event. I need to know where the mouse is located while it is being moved during it's depressed state.

Other browsers are working great.

Here is the essence of my code:

<html>
<head>
<title>IE9 Failure</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
<div id="imgDiv"><img src="http://upload.wikimedia.org/wikipedia/en/1/1e/C.s.lewis3.JPG" alt="C.S. Lewis" /></div>
<div id="logger"></div>

<script>
$('#imgDiv').mousemove(displayMouseXYPos);
$('img').mousedown(function(event)
{
event.preventDefault();
});
var i = 0;
function displayMouseXYPos(e)
{
if (!e) var e = window.event; 
var x = e.clientX + document.body.scrollLeft;
var y = e.clientY + document.body.scrollTop;
i++;
$('#logger').html(i + ') ' + x + ',' + y);
}
</script>
</body>
</html>

Just click and drag your mouse over the image. Observe the data readout in the 'logger' div in Chrome, FF, Safari, Opera, etc. Then check it out in IE9. How do I get IE9 to behave like the others?

Many thanks!

gcdev
  • 1,406
  • 3
  • 17
  • 30
  • 1
    I see no issues on my machine: http://jsfiddle.net/P5m7d/ – Adam Terlson Sep 09 '11 at 14:28
  • I'm using Win7. When I click and drag across the image in non-ie browsers, the x and y coordinates (as shown in the logger div) continuously change. When I do so in IE9, they do not change at all. – gcdev Sep 09 '11 at 14:33
  • in jsfiddle, the code seems to work well even in IE9. But make a plain old HTML doc with the code above and open it in IE9 and it does not work. – gcdev Sep 09 '11 at 14:36
  • That worked fine for me too, in Quirks as well as IE9 standards doc modes. – Adam Terlson Sep 09 '11 at 14:42
  • It was the tag. Wacky stuff. Thanks for pointing me to the jsFiddle, Adam. I viewed source there to resolve the issue. – gcdev Sep 09 '11 at 14:52

2 Answers2

0

I tested your code on my machine w/ Compat mode turned on, and got the issue you describe. Your browser likely has Compatibility Mode turned on.

Add the following meta tag to your page to tell IE to render using the latest renderer version:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

This tag will also disable the user from turning Compat Mode on for any page this is added to. Thus preventing them from inadvertently causing it to break.

Chris Pietschmann
  • 29,502
  • 35
  • 121
  • 166
0

I added the DOCTYPE tag to the top of my HTML code and that resolved the problem:

<!DOCTYPE html>
<html>
<head>
<title>IE9 Failure</title>
...

Thanks to everyone who contributed.

gcdev
  • 1,406
  • 3
  • 17
  • 30