How to "stop" an event?

Question

I'm learning a Vuetifyjs and try writing a "file explorer".
There is an example: codepen-snippet
I can’t understand how to make sure that when you click on the right icon, the entry in the "tree" does not become "active".
Probably need to “stop” the events, but I don’t know how to do it.
Tell me.
Thank.

I want to click on this menu: Menu

it became like this: need

not like now: now

Snippet:

<div id="app">
  <v-app id="inspire">
    <v-content>
        <v-container >
          <v-layout justify-center>
    <v-card min-width=400>
    <v-treeview
      v-model="tree"
      :open="open"
      :items="items"
      activatable
      hoverable
      item-key="name"
      open-on-click
    >
      <template v-slot:prepend="{ item, open }">
        <v-icon v-if="!item.file">
          {{ open ? 'mdi-folder-open' : 'mdi-folder' }}
        </v-icon>
        <v-icon v-else>
          {{ files[item.file] }}
        </v-icon>
      </template>

      <template v-slot:label="{item}">
        <v-hover v-slot:default="{ hover }">
         <div class="d-flex align-center">
          <span>{{item.name}}</span>
           <v-menu
              class="ml-auto"
              style="display: inline"
              :nudge-width="200"
              offset-y
          >
            <template v-slot:activator="{ on }">
              <!--
              -->
              <v-btn
                  v-show="hover"
                  icon
                  small
                  v-on="on"
                  class="pa-0 ma-0"
              >
                <v-icon small class="pa-0 ma-0">more_vert</v-icon>

              </v-btn>
            </template>

            <v-card>

              <v-list>

                <v-list-item @click="() => {}">
                  <v-list-item-action>
                    <v-icon>mdi-information-variant</v-icon>
                  </v-list-item-action>
                  <v-list-item-title>Info</v-list-item-title>
                </v-list-item>

                <v-list-item v-if="item.type === 'process' || item.type === 'state'" @click="() => {}">
                  <v-list-item-action>
                    <v-icon>power_settings_new</v-icon>
                  </v-list-item-action>
                  <v-list-item-title>Status</v-list-item-title>
                </v-list-item>

                <v-list-item @click="() => {}">
                  <v-list-item-action>
                    <v-icon>create</v-icon>
                  </v-list-item-action>
                  <v-list-item-title>Rename</v-list-item-title>
                </v-list-item>


                <v-list-item @click="() => {}">
                  <v-list-item-action>
                    <v-icon>file_copy</v-icon>
                  </v-list-item-action>
                  <v-list-item-title>Copy</v-list-item-title>
                </v-list-item>

                <v-list-item @click="() => {}">
                  <v-list-item-action>
                    <v-icon>mdi-folder-plus</v-icon>
                  </v-list-item-action>
                  <v-list-item-title>Create folder</v-list-item-title>
                </v-list-item>

                <v-list-item @click="() => {}">
                  <v-list-item-action>
                    <v-icon>delete</v-icon>
                  </v-list-item-action>
                  <v-list-item-title>Delete</v-list-item-title>
                </v-list-item>

              </v-list>

            </v-card>
          </v-menu>
         </div>

        </v-hover>
      </template
    </v-treeview>
        </v-card
        </v-layout justify-center>
        </v-container>
      </v-content>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    open: ['public'],
    files: {
      html: 'mdi-language-html5',
      js: 'mdi-nodejs',
      json: 'mdi-json',
      md: 'mdi-markdown',
      pdf: 'mdi-file-pdf',
      png: 'mdi-file-image',
      txt: 'mdi-file-document-outline',
      xls: 'mdi-file-excel',
    },
    tree: [],
    items: [
      {
        name: '.git',
      },
      {
        name: 'node_modules',
      },
      {
        name: 'public',
        children: [
          {
            name: 'static',
            children: [{
              name: 'logo.png',
              file: 'png',
            }],
          },
          {
            name: 'favicon.ico',
            file: 'png',
          },
          {
            name: 'index.html',
            file: 'html',
          },
        ],
      },
      {
        name: '.gitignore',
        file: 'txt',
      },
      {
        name: 'babel.config.js',
        file: 'js',
      },
      {
        name: 'package.json',
        file: 'json',
      },
      {
        name: 'README.md',
        file: 'md',
      },
      {
        name: 'vue.config.js',
        file: 'js',
      },
      {
        name: 'yarn.lock',
        file: 'txt',
      },
    ],
  }),
})

Answer 1

What is happening here is that your click event is propagating to its parent element, so when you click on the icon to display the menu it also triggers the click event of your parent element which is the file or folder container. You can add @click.stop to your v-btn in line 44, like this:

<template v-slot:activator="{ on }">
              <!--
              -->
              <v-btn
                  v-show="hover"
                  icon
                  small
                  v-on="on"
                  class="pa-0 ma-0"
                  @click.stop
              >
                <v-icon small class="pa-0 ma-0">more_vert</v-icon>

              </v-btn>
            </template>

This will stop the event from propagating to its parent element, you can try it out here: codepen-snippet

Now when you click the button it will display your menu and won't change the active or inactive state on your files or folders.

Answer 2

To remove the blue highlighting of items when clicked, remove "activatable" from the v-treeview component:

<v-treeview
  v-model="tree"
  :open="open"
  :items="items"
  activatable
  hoverable
  item-key="name"
  open-on-click >