JavaScript：获取当前事件的元素

粉末的沉淀

于 2022-03-04 12:13:22 发布

阅读量4.8k

点赞数

分类专栏：前端开发 js 文章标签： Vue 事件监听 $event 鼠标样式元素操作

本文链接：https://blog.csdn.net/lilycheng1986/article/details/123273906

版权

前端开发同时被 2 个专栏收录

61 篇文章

订阅专栏

20 篇文章

订阅专栏

这篇博客介绍了如何在Vue中为元素添加点击、鼠标移入和移出事件监听，并通过事件对象 `$event` 修改元素样式。在`mouseEnter`方法中，如果`filePath`不为空，则将鼠标指针更改为手型；而在`mouseLeave`方法中，鼠标指针恢复为默认状态。通过这种方式，可以实现交互式的用户界面效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、在监听事件里加入$event参数。

<div ref="cell" style="width: 75px;" @click="downloadData(items.filePath)"  @mouseenter="mouseEnter(items.filePath,$event)" @mouseleave="mouseLeave($event)">
                    {{items.value}}
                </div>

2、在监听方法里，可以打印一下event的内容，根据实际需要获取相关信息，event.target就是当前元素了。

 // 鼠标移入，如果filePath不为空，鼠标变为手型
      mouseEnter(filePath,event) {
        if(filePath){
          event.target.style.cursor="pointer";
        }
       
      },
      // 鼠标移出，鼠标变为默认状态
      mouseLeave(event) {
        event.target.style.cursor="defualt";
      },