鼠标移入select options会触发mouseleave 事件处理方案

港控/mmm° 2023-03-01 03:28 11阅读 0赞

> 近来遇到一项目有一侧边工具菜单，在鼠标mouseenter事件打开对应的详细操作列表，当mouseleave时进行关闭，然操作列表中有一个select , 每当鼠标移入select options 时整个详细列表就隐藏了, 看如下截图

**看在鼠标移入select options之前: 一切正常**  
![鼠标移入select options之前][select options]  
**看在鼠标移入select options之后: 原本的操作区域消失了**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70]  
**整个操作代码片段**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 1]  
**为了处理这个问题，我们想到了在menuleave中进行dom 元素判断，于是F12查看下页面元素**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 2]  
**于是最后将代码修正如下，问题初步解决（虽然不完美但勉强可以使用）**

menuleave(e, i) { 
          setTimeout(() => { 
            var currTargetEl = e.relatedTarget || e.toElement
            if (currTargetEl) { 
              const elTagName = currTargetEl.tagName
              const targetClassName = currTargetEl.className
              // ul 同时包含className==el-select-dropdown__list
              if (elTagName === 'UL' && targetClassName.indexOf('el-select-dropdown__list') !== -1) { 
                return false
              } else if (elTagName === 'LI' && targetClassName.indexOf('el-select-dropdown__item') !== -1) { 
                return false
              } else if (!e.target.children[1]) { 
                return false
              } else { 
                e.target.children[1].style.display = 'none'
              }
            }
          }, 0)
        },

**参考 ：**  
[html select控件移动到option标签时就触发mouseleave()解决方法][html select_option_mouseleave]

[js获取某个容器下的所有标签，并判断标签类型][js]

[ js(判断元素是否包含某个class名)][js_class]

[mouseover 和mouseenter的区别;冒泡与捕获的区别;冒泡与捕获的如何阻止 ][mouseover _mouseenter_]

[select options]: /images/20230209/38824bd8d62a4c5ba82753967a7ab875.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70]: /images/20230209/55e884b29e8b43308e28fec474a8f3ed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 1]: /images/20230209/1a782850135e49a8a3f08111827ac560.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 2]: /images/20230209/dd93ef046b884f809c783498acbf9d87.png
[html select_option_mouseleave]: https://blog.csdn.net/tian_i/article/details/79181721
[js]: https://blog.csdn.net/weixin_30498807/article/details/102265975
[js_class]: https://blog.csdn.net/qq_39237755/article/details/81281943
[mouseover _mouseenter_]: https://www.cnblogs.com/zycs/p/12683947.html