vue获取当前事件的dom元素 var thisDom = e.currentTarget；

最新推荐文章于 2024-09-21 03:44:45 发布

宋德武

最新推荐文章于 2024-09-21 03:44:45 发布

阅读量9.5k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/songdewu/article/details/79168983

版权

vue 专栏收录该内容

6 篇文章 0 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

在Vue.js开发中，使用click事件时，可通过`e.currentTarget`来获取触发事件的DOM元素，实现对元素的进一步操作。

摘要由CSDN通过智能技术生成

在vue里面，经常用到click，如何获取执行click事件的当前dom对象呢？

<span class="btn-play" tapmode @click="playvideo($event,item.pic)">事件</span>

            playvideo:function(e,src){
                vue获取当前事件的dom元素   
                var thisDom = e.currentTarget;

            }

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

宋德武

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

订阅专栏

vue 获取当前点击dom

爱睡的虫虫

10-11

2542

获取元素

Vue.js的应用——e.currentTarget的应用

Front-End严黑C的博客

08-30

7456

1.当li下有多个子标签时，给li添加了click事件，但是在vue中如果用e.target获取的一般均为li里的子元素，因此采用e.currentTarget方法去获取li的click事件，再去获取li对应的id值，从而可以进行参数传承。 2.在用vue调试工具Devtools 时发现vue.min.js和vue.js的区别，引用的vue.js应该使用vue.js（开发版本）而不是vue.min.js（生成版本）

参与评论您还未登录，请先登录后发表或查看评论

Vue实战指南获取DOM、操作组件

09-21

1797

当需要从子组件向父组件传递数据时，可以使用$emit来触发自定义事件。

e.target与e.currentTarget

xmy_wh的博客

07-12

1210

e.target 事件源 eg：点击那事件源就是button e.currentTarget 获取最外层 eg: 确定当点击确定两字时事件源也会找到最外层button $('.doSubmit').click((e) => { e.stopPropagation(); let classStr = $(e.curre

currentTarget与target

a1013774673的博客

10-11

120

currentTarget和target都是 2 级 DOM 事件标准定义的属性. currentTarget:返回其事件监听器触发该事件的元素，是事件传播过程中经过的节点对象，它可能与target属性相同（目标阶段），也可能是target属性对应节点的祖先节点（捕获附页或冒泡阶段）。 target:返回触发此事件的元素（事件的目标节点），是直接触发事件的节点对象，是整个事件流的最底...

vue组件中获取dom元素

Stargazer777的博客

11-16

330

vue组件中获取dom元素

vue.js click点击事件获取当前元素对象的操作

12-28

Vue.js可以传递$event对象 <body id=app> <li v-on:click=say(>点击当前行文本 <li>li2 <li>li3 [removed] new Vue({ ... message: 'Hello Vue.js!... var el = event.currentTarget; al

在Vue中获取自定义属性方法:data-id的实例

10-14

var autoId = $(e.currentTarget).attr('data-id'); localStorage.setItem('autoId', autoId); ``` 需要注意，这里使用了jQuery的`attr`方法来获取`data-id`，在纯Vue应用中，通常会使用Vue的`ref`或`v-bind`来...

vue获取input值的方法总结

Sunday97的博客

09-07

4883

1、v-model：使用v-model创建双向数据绑定, 用来监听用户的输入事件以更新数据 <template> <input placeholder="请输入你的手机号码" type="number" v-model="number" /> <input placeholder="请输入密码"

踩坑vue v-for操作DOM后不更新

weixin_43986782的博客

04-26

3249

踩坑vue v-for操作DOM后不更新前言最近在看vue的风格指南时，发现了一个以前在学习，甚至开发时忽略的问题。现象看到上面的一段话，想到自己在刚开发的时候遇到过类似的问题。就是在强行修改DOM后（比如改变class）；将v-for 模板数组中，改变的这条删除掉，发现，该class还在。延伸到的场景就是先选择一个或者多个列表，改变了样式(表明该列表被选中)，再删除选中的类别。此时发现...

DOM事件 vue @change

LuckyMon的博客

02-25

2465

js onchange

垂直菜单样式&vue在click事件中获取当前dom元素

qq_35976548的博客

06-09

1178

简单版垂直菜单样式效果图： <div id ="leftDiv"> <a href="#" @click="goLink('我是其他参数',$event)" class="active">AAA</a> <a href="#" @click="goLink('我是其他参数',$event)">BBB</a> </div> <div id ="rightDiv"> &lt

vue获取DOM元素，触发事件

qq_42099419的博客

02-20

2688

HTML元素：如果元素是一个原生的HTML元素，通过绑定ref="selector" 通过this.$refs['selector'].click() 触发组件：如果元素是一个组件，通过绑定ref="selector" 需要通过this.$refs['selector'].$el.click() 触发 ...

vue实践——使用e.target.dataset实现tab切换

yt412182782的博客

08-26

1874

前几篇文章曾经说到过vue实现tab切换的方法，详见https://blog.csdn.net/yt412182782/article/details/99291751 今天给大家介绍另一种实现方式 template methods data 实现效果这种方法的关键点在index的值，index的值是通过data-index控制的，e.target.dataset.i...

Vue中操作dom的方法

热门推荐

vue

12-12

1万+

1、 this.$refs.* 拿到虚拟Dom,可以进行真实dom的一切操作 1）在标签中添加ref="*" 2）在方法中用this.$refs.*拿到这个元素，跟document.getElementById('*')一样。 2、自定义指令中，el就是当前环境下的Dom元素 el.style.color = "yellow"; console.log(el.tagName)...

获取DOM对象的五种方式

微风的博客

08-15

2716

#获取DOM对象的五种方式 ##一，通过ID获取DOM对象 ``` varxx=document.getElementById（'xx'） ``` ##二.通过签名获取DOM对象 ``` varxx=document.getElementsByTagId（'xx'） ``` ##三.通过类名获取DOM对象（获取的） ``` varxx=document.getElementsByClassName('xx') ``` ##...

vue项目中获取DOM元素以及获取当前点击元素的DOM元素

sally18的博客

11-28

8617

VUE中v-on:click事件中获取当前dom元素

weixin_30785593的博客

08-21

2612

在开发中总是忘记，特意在此记录关键字： $event <div class="bed" v-on:click="updateBed(index,$event)">{{item.BedID}}<br>{{item.CriminalName}}</div> updateBed: function(index, e) { ...

Vue.js 中如何获取点击的 DOM 对象

ByteGlide的博客

09-27

352

通过上述方法，你可以在 Vue.js 中获取点击的 DOM 对象，并在事件处理函数中对其进行相应的操作。在 Vue.js 中，获取点击的 DOM 对象可以通过事件处理函数实现。获取到被点击的 DOM 对象，然后可以对该对象进行任何所需的操作。指令，可以通过该指令绑定一个点击事件处理函数，然后在函数中获取点击的 DOM 对象。需要注意的是，Vue.js 中的事件处理函数会自动传递事件对象作为参数，无需手动传递。打印出了获取到的 DOM 对象，你可以根据需求自行修改代码。在上述示例中，我们在。

vue点击事件获取DOM元素

05-14

在 Vue 中，可以使用 `ref` 属性来获取 DOM 元素，并在 `mounted` 钩子函数中使用 `$refs` 对象来访问它们。 HTML： ```html <template> <div> <button ref="myButton" @click="handleClick">Click me</button> </div> </template> ``` JavaScript： ```js export default { methods: { handleClick() { // 访问 DOM 元素 const button = this.$refs.myButton; // 修改 DOM 元素的样式 button.style.backgroundColor = 'red'; } } } ``` 在上面的例子中，我们给 `button` 元素添加了一个 `ref` 属性，这样就可以在 `mounted` 钩子函数中使用 `$refs` 对象访问它。在 `handleClick` 方法中，我们通过 `$refs.myButton` 访问到了 `button` 元素，并修改了它的背景颜色。