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

没有jquery

基本上，我正在寻找的是，当倒计时结束时，能够看到鼠标是否在div上

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

onmouseover

只有当鼠标越过div的阈值时才会触发，如果鼠标没有移动，则不会触发，因此无法工作

我需要确定鼠标当前是否在某个特定的时间点位于div上方，是否从起始点开始移动

我所有的搜寻都只在Mousover上找到了

，

，没有发现鼠标是否恰好在那里

---

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

在mouseOver上设置一个标志为true，在mouseLeave上设置一个标志为false。当倒计时结束时，若标志为真，则其结束元素

HTML

---

这段代码可以工作，但在页面加载后必须移动鼠标一次

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

var坐标；
var getMouseCoordinates=函数（e）{
"严格使用",；
返回{
x:e.clientX，
y:e.clientY
};
};
document.addEventListener（'mousemove'，函数（e）{
坐标=GetMouseCoords（e）；
}，假）；
document.addEventListener（'click'，函数（）{
var divCoords=document.getElementById（'t'）.getBoundingClientRect（）；
如果（coords.x>=divCoords.left&&coords.x=divCoords.top&&coords.y只是想这么说，我认为jQuery的
mouseenter
和
mouseleave
事件会让这变得更容易，但如果您不能使用它们，也许这会对您有所帮助

根据页面布局的不同，这可能不会太难。您可以使用以下方法获取元素的位置。引用其他元素

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

因此，如果您的元素是相对于
主体定位的，那么到目前为止还不错（我们不需要调整任何内容）

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

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

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

您应该使用
.offsetWidth
和
.offsetHeight
属性。注意
它们属于元素，而不是样式

例如：

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
}

var onmove=函数（e）{
var minX=element.offsetLeft；
var maxX=minX+element.offsetWidth；
var minY=element.offsetTop；
var maxY=minY+element.offsetHeight；
如果（e.clientX>=minX&&e.clientX=minY&&e.clientY查看。当您将
x，y
传递到
elementFromPoint
时，它将返回该点处的任何元素（或
，如果没有其他特定元素）。您可以轻松检查此元素是否是您想要的元素

接下来的问题是找出鼠标所处的位置。似乎是说-不要。至少使用mouseMove来跟踪光标。链接的问题给出了如何跟踪光标的示例。（查看得分较低的答案，因为得分较高的答案只会因为尖刻而得分。）
阅读第二个答案后（有数百万个
a
元素的一个）我想出了这个方法，在页面加载时不移动鼠标，也不涉及数百万个元素

HTML
JavaScript
如前所述，绑定到倒计时的完成事件，而不是
文档上的
单击
事件

您也可以使用在
：hover
上更改的任何CSS样式，我选择了边框顶部样式，因为它很显眼。如果您使用的是边框，请选择其他样式

这里有一个。
计算框的实际坐标并进行边界检查将非常困难，并且无论如何都将依赖鼠标事件来获取鼠标的当前坐标。跟踪鼠标移动/鼠标出有您提到的问题。我正在试验检测CSS:hover样式，这可能更可靠。如果有问题，我将发布一个提琴有效。另请参见：@ScottMermelstein如何强制文档在当前坐标下触发单击事件？我只找到了一种使用自定义/指定坐标触发单击事件的方法。@rink.attendant.6 Drat，你说得对。在测试中，我使用body.click（）来触发事件（我想从jQuery开始，然后返回），但它总是报告0,0作为坐标。我收回我的建议。我只是在考虑这个问题，并且有了一个想法（尚未测试，以后可能会这样做）…当鼠标越过边界时，onMouseCenter和onmouseleave触发…问题是“如果不是鼠标改变了这种关系，而是div怎么办？”我正在考虑让一个不可见的1px高100%宽div沿页面垂直循环并在鼠标位置触发。在触发之前，甚至不需要js做任何事情，只需要一个移动0到100 vh并返回的动画。类似地，在vw上有一个1px宽100%高的动画，并且你可以重复定位鼠标，也许？Kender's的问题是如何处理鼠标不移动以产生这两个事件的情况。假设鼠标在页面加载之前放置在框上，并且鼠标在倒计时结束之前从不移动。@George onmouseover将不可避免地触发。请参阅。将鼠标放在输出上，然后按ctrl+enter。感谢George P指出f法律，而国旗
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
}

<div id=t></div>

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

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