CODEWITHSUNDEEP
javascript
Kender
Kender

Reputation: 1264

without jquery i need to find out if the mouse is over an element, not determine when it becomes over (in case it doesn't move to trigger onmouseover)

without jquery

basically what I am looking for is the ability to see if the mouse is over a div when a countdown finishes

if the user is over the div then perform action for that div

onmouseover only triggers when the mouse crosses the threshold of the div, if the mouse hasn't moved it wouldn't trigger, so that wouldn't work

I need to determine if the mouse is currently over a div at a specific point in time, if it has moved or not from the starting point

all of my hunting has only found onmousover, and nothing to see if the mouse just happens to be there to begin with

I don't have the javascript skills to determine overall coords of div, then map mouse coords and see if it fits there... which is what I believe I need to do

Upvotes: 16

Views: 29559

Answers (6)

Serban Stokker
Serban Stokker

Reputation: 141

You don't need any coordinates or mouse events, if you know a selector for that element:

if (document.querySelector('#elementSelector:hover')) {
    alert('I like it when you touch me!');
}

Upvotes: 0

Tim Mac
Tim Mac

Reputation: 1149

Just want to say that, I think jQuery's mouseenter and mouseleave events would make this a lot easier, but if you can't use them, maybe this will help you.

Depending on how your page is laid out, this may not be too difficult. You can get the position of your element using the following. Quoting from another answer

element.offsetLeft and element.offsetTop are the pure javascript properties for finding an element's position with respect to its offsetParent; being the nearest parent element with a position of relative or absolute

So, if your element is positioned relatively to the body, so far so good (We don't need to adjust anything).

Now, if we attach an event to the document mousemove event, we can get the current coordinates of the mouse:

document.addEventListener('mousemove', function (e) {
    var x = e.clientX;
    var y = e.clientY;
}, false);

Now we just need to determine if the mouse falls within the element. To do that we need the height and width of the element. Quoting from another answer

You should use the .offsetWidth and .offsetHeight properties. Note they belong to the element, not .style.

For example:

var element = document.getElementById('element');
var height = element.offsetHeight;
var width = element.offsetWidth;

Now we have all the information we need, and just need to determine if the mouse falls within the element. We might use something like this:

var onmove = function(e) {
   var minX = element.offsetLeft;
   var maxX = minX + element.offsetWidth;
   var minY = element.offsetTop;
   var maxY = minY + element.offsetHeight;

   if(e.clientX >= minX && e.clientX <= maxX)
       //good horizontally

   if(e.clientY >= minY && e.clientY <= maxY)
       //good vertically
}

Upvotes: 1

km6zla
km6zla

Reputation: 4907

set a flag to true onmouseover and to false onmouseleave. when countdown finishes if flag is true then it is over element.

HTML

<div id="div-name">the section of the code i am working with has a countdown timer, when it reaches 0 i need to know if the mouse is over a specific box</div>
<button id="notification" onclick="javascript: letsCountIt(5);">click to start countdown</button>

JS

window.ev = false;

document.getElementById('div-name').onmouseover = function () {
    window.ev = true;
    console.log(window.ev);
}

document.getElementById('div-name').onmouseout = function () {
    window.ev = false;
    console.log(window.ev);
}

window.letsCountIt = function (cdtimer) {
    cdtimer--;
    document.getElementById('notification').innerHTML = cdtimer;

    if (cdtimer == 0) {
        if (window.ev === true) {
            alert('over');
        } else {
            alert('not over');
        }
    } else {
        setTimeout(function(){letsCountIt(cdtimer);}, 1000);
    }
}

Upvotes: 10

Scott Mermelstein
Scott Mermelstein

Reputation: 15397

Look into document.elementFromPoint . When you pass an x,y to elementFromPoint, it will return whatever element (or <body>, if no other specific element) is at that point. You can easily check if this element is the element you want.

The problem then is finding out what point your mouse is at. How to get the mouse position without events (without moving the mouse)? seems to say - don't. At least use mouseMove to track the cursor. The linked question gives examples of how to do so. (Look to the lower scoring answers, as the higher ones only got points for being snarky.)

Upvotes: 2

rink.attendant.6
rink.attendant.6

Reputation: 46307

After reading the second answer (the one with millions of a elements) on this SO question, I've came up with this method works without moving the mouse on page load, without involving millions of elements.

HTML

<div id=t></div>

CSS

#t {
    /* for illustrative purposes */
    width: 10em;
    height: 5em;
    background-color: #0af;
}
#t:hover {
    border-top-style: hidden;
}

JavaScript

document.addEventListener('click', function () {
    var c = window.getComputedStyle(document.getElementById('t')).getPropertyValue('border-top-style');

    if (c === 'hidden') {
        alert('Mouse in box');
    } else {
        alert('Mouse not in box');
    }
}, false);

As stated earlier, bind to the finish event of your countdown instead of the click event on the document.

You may also use any CSS style that's changed on :hover, I chose border-top-style as it is conspicuous. If you're using a border, choose something else.

Here's a jsFiddle.

Upvotes: 16

rink.attendant.6
rink.attendant.6

Reputation: 46307

This code works, but the mouse has to be moved once after page load.

var coords;
var getMouseCoordinates = function (e) {
    'use strict';
    return {
        x: e.clientX,
        y: e.clientY
    };
};

document.addEventListener('mousemove', function (e) {
    coords = getMouseCoordinates(e);
}, false);

document.addEventListener('click', function () {
    var divCoords = document.getElementById('t').getBoundingClientRect();

    if (coords.x >= divCoords.left && coords.x <= divCoords.right && coords.y >= divCoords.top && coords.y <= divCoords.bottom) {
        alert('Mouse in box');
    } else {
        alert('Mouse not in box');
    }
}, false);

You wouldn't bind to the click event of document, but rather the finish event of your countdown.

Here's an example. Try clicking in the output window.

Upvotes: 0

Related Questions