Question

没有jquery

基本上我正在寻找的是能够在倒计时结束时查看鼠标是否超过div

如果用户在div上方，则执行该div的操作

onmouseover仅在鼠标超过div的阈值时触发，如果鼠标未移动则不会触发，因此无效

我需要确定鼠标当前是否在某个特定时间点的div上，如果它已经从起点移动了

我所有的狩猎只发现了onmousover，没有什么可以看到鼠标恰好在那里开始

我没有javascript技能来确定div的整体坐标，然后映射鼠标坐标，看它是否适合那里......这是我认为我需要做的事情

Answer 1

在this SO question上阅读第二个答案（有数百万个a元素的答案）之后，我想出了这个方法，无需在页面加载时移动鼠标，而不涉及数百万个元素

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

如前所述，绑定到倒计时的结束事件，而不是click上的document事件。

你也可以使用:hover上改变的任何CSS样式，我选择了border-top-style，因为它很显眼。如果您正在使用边框，请选择其他内容。

这是jsFiddle。

Answer 2

将标志设置为true onmouseover和false onmouseleave。当倒计时结束时，如果flag为true，那么它就是元素。

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);
    }
}

Answer 3

只是想说，我认为jQuery的mouseenter和mouseleave事件会让事情变得容易多了，但是如果你不能使用它们，也许这会对你有帮助。

根据您的网页布局方式，这可能不会太困难。您可以使用以下方法获取元素的位置。引用另一个answer

element.offsetLeft和element.offsetTop是纯粹的javascript 用于查找元素相对于其位置的属性 offsetParent;是最近的父元素，其位置为相对或绝对

所以，如果你的元素相对于body定位，那么好（我们不需要调整任何东西）。

现在，如果我们将事件附加到document mousemove事件，我们可以获取鼠标的当前坐标：

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

现在我们只需要确定鼠标是否属于元素。为此，我们需要元素的高度和宽度。引用另一个answer

您应该使用.offsetWidth和.offsetHeight属性。注意它们属于元素，而非.style。

例如：

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

现在我们拥有了所需的所有信息，只需要确定鼠标是否属于元素。我们可能会使用这样的东西：

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
}

Answer 4

查看document.elementFromPoint。当您将x,y传递给elementFromPoint时，它将返回任何元素（或<body>，如果没有其他特定元素）。您可以轻松检查此元素是否是您想要的元素。

问题是找出你的鼠标在哪一点。 How to get the mouse position without events (without moving the mouse)?似乎在说 - 不要。至少使用mouseMove来跟踪光标。链接的问题提供了如何执行此操作的示例。（看看得分较低的答案，因为较高的答案只会因为讽刺而得分。）

Answer 5

此代码有效，但鼠标必须在页面加载后移动一次。

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

您不会绑定click的{{1}}事件，而是结束倒计时的结束事件。

这是一个example。尝试单击输出窗口。

没有jquery我需要找出鼠标是否在元素上，而不是确定它何时结束（如果它没有移动到触发onmouseover）

5 个答案:

HTML

CSS

的JavaScript