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)?

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)?

• javascript

Share Improve this question Follow asked Aug 21, 2012 at 13:31 ImpImp 8,61911 gold badge2828 silver badges3636 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You could modify your mousemove to keep a state variable with the current mouse coordinates, and use that information to perform a collision detection that you call both on mouse move, and on moving a div.

A little example of what that might look like

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 bees 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./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/grimertop90/LxT7V/1/