15

没有jQuery

基本上我正在寻找的是能够在倒计时完成时查看鼠标是否在 div 上

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

onmouseover只在鼠标越过div的阈值时触发，如果鼠标没有移动它不会触发，所以这不起作用

我需要确定鼠标当前是否在特定时间点位于 div 上，是否已从起点移动

我所有的狩猎都只是找到了onmousover，没有什么可看的，如果老鼠刚开始就在那里

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

4

5 回答 5

16

在阅读了关于这个 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.

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

这是一个jsFiddle。

于 2013-08-19T18:50:09.527 回答
11

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

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);
    }
}
于 2013-08-19T18:05:01.600 回答
2

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

然后问题是找出你的鼠标在哪一点。 如何在没有事件的情况下获得鼠标位置（不移动鼠标）？似乎在说——不要。至少使用 mouseMove 来跟踪光标。链接的问题提供了如何执行此操作的示例。（查看得分较低的答案，因为得分较高的答案只会因为刻薄而得分。）

于 2013-08-19T18:35:30.910 回答
1

只想这么说，我认为 jQuerymouseenter和mouseleave事件会让这更容易，但如果你不能使用它们，也许这会对你有所帮助。

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

element.offsetLeft并且element.offsetTop是用于查找元素相对于其 offsetParent 位置的纯 javascript 属性；是最近的具有相对或绝对位置的父元素

因此，如果您的元素相对于 定位body，那么到目前为止一切都很好（我们不需要调整任何东西）。

现在，如果我们给 mousemove 事件附加一个事件document，我们可以得到鼠标的当前坐标：

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

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

您应该使用.offsetWidthand.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
}
于 2013-08-19T18:24:37.313 回答
0

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

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事件document，而是绑定到倒计时的完成事件。

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

于 2013-08-19T18:22:47.093 回答