MouseEvent movementX property apparently not supported in internet explorer

Question

I am developing an application that needs to be compatible on IE 9 and above. I am using the movementX property on a MouseEvent object, however this same MouseEvent object does not have the movementX property in Internet Explorer (9 or 11).

I ran through Microsoft's documentation and indeed they claim to support this property on their MouseEvent objects. I have verified this is in fact a MouseEvent object, and it simply doesn't have the property. All the other properties appear to be available except this one.

Does anyone have experience with this issue? The internet at large looks pretty silent on this one.

Answer 1

You will need to replicate it's behaviour by taking the delta between subsequent screenX and screenY values.

// Store previous screenX/screenY somewhere outside of callback
var prevX = 0;
var prevY = 0;

// Callback whenever the mouse moves
function mousemove(e) {
    var movementX = (prevX ? e.screenX - prevX : 0)
    var movementY = (prevY ? e.screenY - prevY : 0)

    prevX = e.screenX;
    prevY = e.screenY;
}

Note that if you are listening to mousemove to say, figure out if something is being dragged, you should reset prevX and prevY to 0 on mouseup or else you'll get the old screen values!