相关文章推荐
慷慨大方的皮带  ·  vue3+ts:shims-vue.d.ts·  2 月前    · 
温暖的弓箭  ·  11_vue计算属性computed_vue ...·  2 月前    · 
玩足球的人字拖  ·  如何在Vue组件中调用封装好的外部js文件方 ...·  2 月前    · 
豪情万千的眼镜  ·  [Vue3] v-for循环中报错 ...·  1 月前    · 
傻傻的大海  ·  若依Vue(前后端分离版)开源项目分析【完结 ...·  4 周前    · 
健壮的野马  ·  MultipartFile.transfer ...·  1 年前    · 
爱逃课的牛腩  ·  .NET Core 2.1 的新增功能 - ...·  1 年前    · 
害羞的篮球  ·  关于树莓派4B两个i2c通道的理解(SDA. ...·  1 年前    · 
大气的创口贴  ·  毕业论文如何生成图表目录(简明直观版) - 知乎·  1 年前    · 
心软的马克杯  ·  phpExcel导入大数据量情况下内存溢出解 ...·  2 年前    · 
Code  ›  vue获取当前点击元素的父元素、子元素、上级元素等开发者社区
string vue
https://cloud.tencent.com/developer/article/1939546
善良的鞭炮
1 年前
作者头像
用户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属性
 
推荐文章
慷慨大方的皮带  ·  vue3+ts:shims-vue.d.ts
2 月前
温暖的弓箭  ·  11_vue计算属性computed_vue2 computed加载时执行两次
2 月前
玩足球的人字拖  ·  如何在Vue组件中调用封装好的外部js文件方法-天翼云
2 月前
豪情万千的眼镜  ·  [Vue3] v-for循环中报错 类型“never”上不存在属性“xxx”_类型“never”上不存在属性“label”
1 月前
傻傻的大海  ·  若依Vue(前后端分离版)开源项目分析【完结】__bilibili
4 周前
健壮的野马  ·  MultipartFile.transferTo(dest) 报找不到文件错误以及解决方法_multipartfile transferto 报错-CSDN博客
1 年前
爱逃课的牛腩  ·  .NET Core 2.1 的新增功能 - .NET | Microsoft Learn
1 年前
害羞的篮球  ·  关于树莓派4B两个i2c通道的理解(SDA.0以及SCL.0或者SDA.1以及SCL.1无法使用问题) - 知乎
1 年前
大气的创口贴  ·  毕业论文如何生成图表目录(简明直观版) - 知乎
1 年前
心软的马克杯  ·  phpExcel导入大数据量情况下内存溢出解决方案 - Chrdai - 博客园
2 年前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号