触发el-menu-item事件获取的event对象

触发el-menu-item事件时，会自动传入一个event对象作为参数，你可以通过该对象获取触发事件的具体信息，例如触发的元素、鼠标位置、键盘按键等。具体可以通过以下方式获取该对象的属性：

event.target：获取触发事件的目标元素，即el-menu-item元素本身。
event.currentTarget：获取绑定事件的元素，即包含el-menu-item元素的el-menu组件。
event.key：获取触发事件时按下的键盘按键。
event.clientX和event.clientY：获取触发事件时鼠标的横纵坐标。
event.pageX和event.pageY：获取触发事件时鼠标相对于页面左上角的横纵坐标。
event.preventDefault()：阻止默认行为。

相关问题

vue3 el-sub-menu 和el-menu-item 都有点击事件

实现 Vue3 中 el-sub-menu 和 el-menu-item 的点击事件
在 Vue3 使用 Element Plus 库时，可以分别为 el-sub-menu 和 el-menu-item 添加点击事件。由于事件冒泡机制的存在，在点击子菜单项 (el-menu-item) 时，事件会传播至父级的子菜单 (el-sub-menu)。为了防止不必要的行为触发，可以在 el-sub-menu 的点击处理器中加入逻辑判断。
对于 el-menu-item 而言，其默认 click 事件由组件库内部处理，并不直接传递原生 event 参数[^1]。因此，阻止事件冒泡需采用特定策略：
方法一：通过事件对象区分目标元素
<template>
<el-menu :default-active="activeIndex">
<el-sub-menu index="1" @click="handleSubMenuClick($event)">
<span slot="title">导航一</span>
<el-menu-item index="1-1" @click="handleMenuItemClick('Item 1')">选项1</el-menu-item>
<el-menu-item index="1-2" @click="handleMenuItemClick('Item 2')">选项2</el-menu-item>
</el-sub-menu>
</el-menu>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const activeIndex = ref<string>('');

function handleSubMenuClick(event: MouseEvent): void {
const targetElement = event.target as HTMLElement;
const subMenuTitle = document.querySelector('.subMenuTitle');

if (targetElement !== subMenuTitle && !targetElement.closest('.el-menu-item')) {
console.log('Sub Menu Clicked');
}
}

function handleMenuItemClick(itemName: string): void {
console.log(`${itemName} clicked`);
}
</script>

此代码片段展示了如何利用 $event 来访问原始鼠标事件并检查实际被点击的是哪个部分。如果点击发生在 .el-menu-item 上，则仅调用对应的 item 处理函数；而当点击发生于其他区域（即真正的子菜单标题），则执行预期的子菜单动作。
方法二：CSS 属性调整布局方式
除了 JavaScript 控制外，还可以考虑改变样式来影响交互体验。比如设置 el-sub-menu 的显示模式为网格布局(grid)，这可能有助于改善视觉效果或响应特性[^2]。
.el-sub-menu {
display: grid;
}

这种方法主要作用在于美化界面而非解决功能上的冲突问题。不过有时候合理的 CSS 设置也能间接帮助优化用户体验。

el-menu 点击事件

使用 el-menu 的点击事件
在使用 Element Plus 组件库中的 el-menu 时，可以利用其内置的事件来响应用户的交互行为。对于 el-menu-item 和 el-sub-menu 的点击事件处理有特定的方式。
当同时给 el-sub-menu 和它的子项 el-menu-item 添加点击事件监听器时，由于 DOM 事件冒泡机制的存在，点击子项触发的事件可能会传播至父级菜单[^1]。为了避免这种情况下的误触，在定义 el-sub-menu 的回调函数内可以通过检查 $event.target 来区分实际被点击的对象是否为预期的目标元素：
const subMenu_clickEvent = ($event) => {
let subMenuTitle = document.querySelector('.subMenuTitle');
if ($event.target !== subMenuTitle) {
return;
}
}

为了自定义样式并覆盖默认外观，可通过 CSS 类选择器修改 .el-menu, .el-menu-item 及其他关联类的选择器属性值。例如移除右边框、调整圆角半径以及更改激活状态的文字颜色等[^2]:
.el-menu{
border-right: none !important;
border-radius: 5px !important;
background-image: linear-gradient(135deg, #EE9AE5 10%, #5961F9 100%) !important;
}

.el-menu-item{
border-radius: 15px !important;
}

.el-menu-item.is-active {
font-weight: bold !important;
font-size: larger !important;
color: aqua !important;
}

针对刷新页面后保持导航高亮的问题，可以在每次用户选择新的菜单项时将其对应的路由信息存储起来（比如存入 Cookie 或者 localStorage），这样即使页面重新加载也能恢复之前的浏览位置[^3]。