NavMenu prevents events from bubbling

 

When I click the button on the homepage, I absolutely locate to the upper left corner, and click on other positions on the page to close the menu

But when I click the option on the menu, the menu will also trigger an event to close the menu

<template>
  <!--在此处添加渲染的内容-->
  <div @click="intercept($event)">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      @select="handleSelect"
      :unique-opened="true"
      menu-trigger="click"
      background-color="#22262d"
      text-color="#cccccc"
      active-text-color="#ffffff">
      <el-submenu :index="item.id" v-for="(item,index,key) in navList" :key="key">
        <template slot="title" v-if="index!=0||index!=3">
          <span>{
   
   {item.firstLevelTitle}}</span>
        </template>
        <el-menu-item :index="nextitem.name" v-for="(nextitem,nextindex,nextkey) in item.nextLevel"
                      :key="nextkey">{
   
   {nextitem.title}}
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

The solution is to set the click event to the outermost div of the menu

intercept(e){
   e.stopImmediatePropagation();
},

Use stopImmediatePropagation() to prevent events from triggering to close menu events