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

 

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

看在鼠标移入select options之前: 一切正常

看在鼠标移入select options之后: 原本的操作区域消失了

整个操作代码片段

为了处理这个问题，我们想到了在menuleave中进行dom 元素判断，于是F12查看下页面元素

于是最后将代码修正如下，问题初步解决（虽然不完美但勉强可以使用）

   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()解决方法

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

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

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