vue获取当前点击元素的父元素、子元素、上级元素等
Sonder
2022-12-29
1408字
4分钟
浏览 (2.4k)
<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属性
e.currentTarget.parentElement
获得点击元素的父级元素
e.currentTarget.previousElementSibling.firstElementChild.innerHTML
获得点击元素的前一个元素的第一个子元素的HTML值