Question

Suppose we have a <div> with a mousemove handler bound to it. If the mouse pointer enters and moves around this div, the event is triggered.

However, I am dealing with a rich web application where <div>s move around the screen, appear and disappear… So it may happen that a <div> appears under the mouse pointer. In this case, mousemove is not triggered. However, I need it to be. (Note that replacing mousemove with mouseover does not change this behavior.)

Specifically, the <div> has to be highlighted and I deem it as a UI flaw to require the user to do a slight mouse move in order to trigger the highlighting.

Is it possible to trigger the mousemove event programatically? And I do not mean

document.getElementById('mydiv').onmousemove();

because onmousemove is parametrised by the event object, which I do not have.

Is it possible to make browser behave as if onmousemove was triggered on the current mouse’s position (although in fact the mouse didn’t move)?

Answer 1

You actually can create a mousemove event object to pass in, using something like this:

window.onload = function () {
    document.getElementById("test").onmousemove = function(e) { console.log(e); };
    document.getElementById("test").onclick = function(e) { 
        var e = document.createEvent('MouseEvents'); 
        e.initMouseEvent('mousemove',true,true,document.defaultView,<detail>,<screenX>,<screenY>,<mouseX>,<mouseY>,false,false,false,false,<button>,null);
        this.onmousemove(e); 
    };
};

Of course, here I’m firing it on a click, but you can do it on whatever event you want, such as when your div becomes visible, check to see if the mouse is within it. You just need to make sure your parameters are right, and you need to track the mouse position on your own. Also, there’s some differences in IE, I think. Here’s my source: http://chamnapchhorn.blogspot.com/2008/06/artificial-mouse-events-in-javascript.html. He added a little extra code to account for it.

Here’s a fiddle to play around with. http://jsfiddle.net/grimertop90/LxT7V/1/