How to check over what element my mouse is when I lose focus on input element

Question

Let's say I have this:

<body>
<input type="text" onblur="myFunction()" />

<... rest of page ...>

</body>


<script type="text/javascript">

    function myFunction()
    {
        //this function alerts over what element your mouse is when the input loses focus
    }
</script>

Does someone know how to implement this?

Answer 1

You could track what element your mouse if hovering over, like this:

<input type="text" id="myInput" onblur="myFunction()" />

var input = document.getElementById('myInput'), // Get the input element
    focus;

input.onmouseover = input.onfocus = function(){focus = true;}; // Set focus to true if the input gains focus
input.onmouseout = input.onblur = function(){focus = false}; // Set focus to false if the input loses focus

document.body.onmousemove = function(e){
    if(!focus){ // Only log the target is the input doesn't have focus
        console.log(e.target); //Log the current element the mouse is hovering over.
    }
};

As far as I know, there's no accurate way to check the mouse's current target on the "mouseleave" or "blur" events, since the event.target of those functions will point to the element the mouse just left, not to the element the mouse is currently hovering over.

Edit:
I added some code so it only logs when the input doesn't have focus.

How to check over what element my mouse is when I lose focus on input element

Question

1 answers

solution1
4 ACCPTED 2013-01-04 09:37:39

How to check over what element my mouse is when I lose focus on input element

Question

1 answers

solution1 4 ACCPTED 2013-01-04 09:37:39

solution1
4 ACCPTED 2013-01-04 09:37:39