导航条首次点击和悬浮效果冲突

如图，在如上图片中，要实现鼠标在点击和悬浮时都能够实现展开或者收缩的效果，这样一来，如果用户在首次悬浮时并且点击，此时体验效果很差，因此在悬浮和点击时给点击绑定一个事件，实现延迟效果，代码如下：

<el-submenu
    ref="subMenu"
    class="custom-submenu"
    :index="handlePath(item.path)"
    :show-timeout="0"
    :hide-timeout="0"
    :popper-append-to-body="false">
    <template
      slot="title">
      <!-- <i
        :class="getIcons[item.meta.title]"></i> -->
      <span>{{ item.meta.title }}</span>
    </template>
    <slot>
    </slot>
  </el-submenu>
  
methods: {
  handleClick() {
      const refMenu = this.$refs.subMenu.$refs['submenu-title']
      // querySelector 拿到的只是一个标签
      // querySelectorAll 拿到的是一个数组
      // const refMenu = document.querySelectorAll('.el-submenu__title')

      const time = 1 * 500
      // 此标志用来判断此时是否是鼠标首次进入导航条，如果是则禁止事件冒泡即阻止click事件，当鼠标在导航条上超过1s后将标志位置为true
      let enterTimeFlag = false

      // 第三个参数表示的使用捕获/冒泡,true表示使用捕获,false表示使用冒泡
      refMenu.addEventListener(
        'mouseenter',
        (e) => {
          enterTimeFlag = false

          setTimeout(() => {
            enterTimeFlag = true
          }, time)
        },
        true,
      )
      refMenu.addEventListener(
        'mouseleave',
        (event) => {
          enterTimeFlag = false
        },
        true,
      )
      refMenu.addEventListener(
        'click',
        (e) => {
          if (!enterTimeFlag) {
            e.stopImmediatePropagation()
          }
        },
        true,
      )
    },
}