JS怎么判断鼠标进入离开的方向?

偏执的太偏执、 2021-08-28 22:18 274阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style type="text/css"> #box{ width: 300px; height: 300px; margin: 80px auto 80px; border:1px solid red; } </style>
    </head>
    <body>
        <div id="box"></div>
    </body>
    <script type="text/javascript"> var wz = function(wrap){ var wrap = document.getElementById(wrap); var hoverDir = function(e){ var w = wrap.offsetWidth, h = wrap.offsetHeight, x = ( e.clientX - wrap.offsetLeft - ( w / 2 ) ) * ( w > h ? ( h / w ) : 1 ), y = (e.clientY - wrap.offsetTop - (h / 2)) * (h > w ? (w / h) : 1), // 上(0) 右(1) 下(2) 左(3) direction = Math.round( ( ( ( Math.atan2( y, x ) * ( 180 / Math.PI ) ) + 180 ) / 90) + 3 ) % 4, eventType = e.type, dirName = new Array('上方','右侧','下方','左侧'); if( e.type == 'mouseover' || e.type == 'mouseenter' ){ wrap.innerHTML = dirName[direction] + '进入'; }else{ wrap.innerHTML = dirName[direction] + '离开'; } } 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 ); } } wz('box'); </script>
    </html>

--------------------

> 作者：**Vam的金豆之路**
> 
> 主要领域：**前端开发**
> 
> 我的微信：**maomin9761**
> 
> 微信公众号：**前端历劫之路**
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70][]

--------------------

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70]: /images/20210813/1b360abc7ad848a1a58ee096feac9707.png