IE9 Mousemove event not firing during Mousepress
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 'log开发者_开发百科ger' 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!
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.
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.
精彩评论