javascript - 如何在没有 css 的情况下检查鼠标是否在屏幕上的 "invisible"框内(JavaScript 和 jQuery)

Question

有没有办法检查鼠标是否在屏幕上的某个框内。我不知道将 jQuery 变量导出为整数以在 Javascript if 语句 中使用。我知道这可以通过 div 实现，但我不想使用 div 因为我需要很多这样的 if 语句，我不想弄乱我的 CSS。我乐于接受比不使用 CSS 时更有效的想法。

到目前为止，这就是我所有的...

$(document).on("mousemove", function(event) {
    var mouseX = event.pageX;
    var mouseY = event.pageY;
});  

if(mouseX > 80 && mouseX < 200 && mouseY > 80 && mouseY < 200){
    alert("Message");
}

Answer 1

访问 mouseX和 mouseY在if-statement里面你需要在 mousover 之外声明它们-function-handler 使它们成为全局的。
您可以阅读更多关于 scope by todd motto 的信息

您的问题的解决方案

var mouseX
var mouseY
$(document).on("mousemove", function (event) {
    // override mouseX and mouseY
    mouseX = event.pageX
    mouseY = event.pageY
});

// access to mouseX and mouseY
if (mouseX > 80 && mouseX < 200 && mouseY > 80 && mouseY < 200) {
    alert("Message")
}

您可以将处理程序中的 if 语句写入 avoid global scope

$(document).on("mousemove", function (event) {
    var mouseX = event.pageX
    var mouseY = event.pageY

    if (mouseX > 80 && mouseX < 200 && mouseY > 80 && mouseY < 200) {
        alert("Message")
    }
});

但是不要在文档上使用mousemove

$(document).on('mousemove', function(){/*...*/}) 每次您在页面上移动鼠标时都会执行 - 这不是您真正想要的。
相反，您可以使用 mouseenter在您要观察的元素上。

function observeHover(event) {
  console.log(event.target)
}

$('.circle').on('mouseenter', observeHover)

.box {
  width: 3em;
  height: 3em;
  margin: 1em 0;
  background-color: IndianRed;
}

.circle {
  width: 3em;
  height: 3em;
  border-radius: 50%;
  background-color: Indigo;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one" class="box"></div>
<div id="two" class="box"></div>
<div id="three" class="circle"></div>