鼠標移入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的區別;冒泡與捕獲的區別;冒泡與捕獲的如何阻止