Moving the mouse into select options will trigger the mouseleave event processing scheme

Recently, I came across a project with a side tool menu , In the mouse mouseenter Event opens the corresponding detailed operation list , When mouseleave Close when , However, there is one in the operation list select , Whenever the mouse moves in select options The entire detailed list is hidden , Look at the screenshot below

Look at the mouse move in select options Before : Everything is all right

Look at the mouse move in select options after : The original operation area disappeared

The whole operation code fragment

In order to deal with this problem , We thought of in menuleave In the middle of dom Element judgment , therefore F12 View the next page element

So finally, the code is revised as follows , The problem has been preliminarily solved （ Although not perfect, it can be used reluctantly ）

   menuleave(e, i) {
    
      setTimeout(() => {
    
        var currTargetEl = e.relatedTarget || e.toElement
        if (currTargetEl) {
    
          const elTagName = currTargetEl.tagName
          const targetClassName = currTargetEl.className
          // ul  Also include 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)
    },

Reference resources ：
html select Control moved to option The tag is triggered mouseleave() resolvent

js Get all labels under a container , And determine the label type

js( Determine whether the element contains a class name )

mouseover and mouseenter The difference between ; The difference between bubbling and trapping ; How to prevent bubbling and trapping