JS Determine From Which Direction the Mouse Enters a Container Example_Javascript Skills

I accidentally thought of a question about how to determine which direction the mouse enters a container. The first thing that comes to mind is to add a few blocks to the four sides of the container, and then see which block listens to the mouse event first when the mouse enters. But this is too much trouble. I googled and found a good solution, which is based on jquery. To be honest, the var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) 180) / 90) 3) % 4; I really don’t understand the mathematical knowledge used in this sentence. There are some English comments in the original text, so I won’t explain them one by one. There is not a lot of code, so I just wrote an example.

<meta charset="UTF-8"> <title>Determine the mouse entry direction</title> <style> html,body{margin:0;padding:0;} #wrap{width:300px;height:300px;background:#33aa00;margin:50px;display:inline-block;font-size:50px;text-align:center;line-height:300px;} </style> <div id="wrap"> directional feedback </div>
[Ctrl A Select all Note:

If you need to introduce external Js, you need to refresh to execute
]

Move the mouse above, you can See the effect. The returned direction values ​​are "0,1,2,3" corresponding to "top, right, bottom, left" respectively

So the result value can be switched and looped
switch (direction) { case 0: $(this).html('Enter above'); break; case 1: $(this).html('Enter on the right'); break; case 2: $(this).html('Enter below'); break; case 3: $(this).html('Enter from the left'); break; } [Ctrl A Select all Note:

If you need to introduce external Js, you need to refresh to execute
]

The original code is based on jquery , later I wrote a native js effect, the code is not encapsulated, for friends who need it. Since browsers such as Firefox do not support mouseenter and mouseleave events, I temporarily used mouseover and mouseout instead. If you need to solve the bubbling problem, you should search for compatibility solutions by yourself.
var wrap = document.getElementById('wrap'); var hoverDir = function(e){ var w=wrap.offsetWidth; var h=wrap.offsetHeight; var x=(e.clientX - wrap.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1); var y=(e.clientY - wrap.offsetTop - (h / 2)) * (h > w ? (w / h) : 1); var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) 180) / 90) 3) % 4; var eventType = e.type; var dirName = new Array('above','right','below','left'); if(e.type == 'mouseover' || e.type == 'mouseenter'){ wrap.innerHTML=dirName[direction] 'Enter'; }else{ wrap.innerHTML=dirName[direction] 'Leave'; } } if(window.addEventListener){ wrap.addEventListener('mouseover',hoverDir,false); wrap.addEventListener('mouseout',hoverDir,false); }else if(window.attachEvent){ wrap.attachEvent('onmouseenter',hoverDir); wrap.attachEvent('onmouseleave',hoverDir); } [Ctrl A select all Note:

If you need to introduce external Js, you need to refresh to execute ]<script> $("#wrap").bind("mouseenter mouseleave", function(e) { var w = $(this).width(); var h = $(this).height(); var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1); var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1); var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; var eventType = e.type; var dirName = new Array('上方','右侧','下方','左侧'); if(e.type == 'mouseenter'){ $(this).html(dirName[direction]+'进入'); }else{ $(this).html(dirName[direction]+'离开'); } }); </script>