相关文章推荐
非常酷的黄豆  ·  vue中使用keep- ...·  2 周前    · 
失落的汽水  ·  Building a Real-Time ...·  14 小时前    · 
风流的豌豆  ·  使用SpringBoot进行优雅的数据验证 ...·  1 年前    · 
稳重的自行车  ·  python气象绘图入门-掘金·  1 年前    · 
傲视众生的白开水  ·  pywinauto-CSDN博客·  1 年前    · 
暴躁的电影票  ·  html倒计时器源代码 - 抖音·  2 年前    · 
完美的苹果  ·  愿意为品质生活掏钱,也乐意为新潮产品买单—— ...·  2 年前    · 
Code  ›  vue获取当前点击元素的父元素、子元素、上级元素等开发者社区
string vue
https://cloud.tencent.com/developer/article/1939546
善良的鞭炮
2 年前
作者头像
用户1349575
0 篇文章

vue获取当前点击元素的父元素、子元素、上级元素等

原创
前往专栏
腾讯云
开发者社区
文档 意见反馈 控制台
首页
学习
活动
专区
工具
TVP
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP
返回腾讯云官网
社区首页 > 专栏 > 编程社区 > vue获取当前点击元素的父元素、子元素、上级元素等

vue获取当前点击元素的父元素、子元素、上级元素等

原创
作者头像
用户1349575
发布 于 2022-01-26 10:04:21
6.1K 0
发布 于 2022-01-26 10:04:21
举报
<div @click = "clickfun($event)">点击</div>
methods: {
    clickfun(e) {
        // e.target 是你当前点击的元素
        // e.currentTarget 是你绑定事件的元素
        #获得点击元素的前一个元素
        e.currentTarget.previousElementSibling.innerHTML
        #获得点击元素的第一个子元素
        e.currentTarget.firstElementChild
        # 获得点击元素的下一个元素
        e.currentTarget.nextElementSibling
        # 获得点击元素中类名为string的元素
        e.currentTarget.getElementsByClassName("string")
        # 获得点击元素的string属性
        e.currentTarget.getAttributeNode('string')
        # 获得点击元素的父级元素
        e.currentTarget.parentElement
        # 获得点击元素的前一个元素的第一个子元素的HTML值
        e.currentTarget.previousElementSibling.firstElementChild.innerHTML

$parent 该组件实例的父级组件实例

$children 该组件实例的子组件实例

//通过ref属性获取
this.$refs.handle.$parent
this.$refs.handle.$children

// e 指向当前元素,可以通过 $event传递
e.target 
	是你当前点击的元素
e.currentTarget 
	是你绑定事件的元素
e.currentTarget.previousElementSibling.innerHTML
	获得点击元素的前一个元素
e.currentTarget.firstElementChild
	获得点击元素的第一个子元素
e.currentTarget.nextElementSibling
  获得点击元素的下一个元素
e.currentTarget.getElementById("string")
  获得点击元素中id为string的元素
e.currentTarget.getAttributeNode('string')
  获得点击元素的string属性
 
推荐文章
非常酷的黄豆  ·  vue中使用keep- alive缓存机制,切换标签含有iframe标签的界面会被重新刷新的问题处理 - wamm521
2 周前
失落的汽水  ·  Building a Real-Time Chat Micro-Frontend with Vue 3, Vite, and Module Federation
14 小时前
风流的豌豆  ·  使用SpringBoot进行优雅的数据验证 - 程序员自由之路 - 博客园
1 年前
稳重的自行车  ·  python气象绘图入门-掘金
1 年前
傲视众生的白开水  ·  pywinauto-CSDN博客
1 年前
暴躁的电影票  ·  html倒计时器源代码 - 抖音
2 年前
完美的苹果  ·  愿意为品质生活掏钱,也乐意为新潮产品买单——消费升级,县城正提速(县城建设新看点③)_深圳新闻网
2 年前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号