My webpage has a hidden area that is dynamically set to occupy 60% of the window's width and 70% of its height, centered on the page. This means that the area starts at 20% of the window's width and 15% of its height away from the top-left corner.
I am trying to make different interactions happen based on whether the cursor is inside or outside this area.
document.onmousemove = function(e){
var cursorX = e.pageX;
var cursorY = e.pageY;
var windowW = $(window).width();
var windowH = $(window).height();
if (0.2 * windowW <= cursorX <= 0.8 * windowW && 0.15 * windowH <= cursorY <= 0.85 * windowH) {
console.log("the cursor is inside the bound, do something.");
} else {
console.log("the cursor is outside the bound, do something else.");
}
}
Currently, my mouse movements are only registering as being inside the boundary. I suspect there may be an issue with the if statement. How can I correct this?
Edits: Please keep in mind that I also have a drawing canvas at the bottom of the page which prevents me from using mouseenter() and mouseleave() on a div overlay. Are there any alternative solutions?