美文网首页
vue 获取事件节点

vue 获取事件节点

作者: LUOTAOLUOTAO | 来源:发表于2020-04-15 11:08 被阅读0次

模版

<div @click = “clickfun($event)”>
  <span>点击</span>
</div>

执行函数

 methods: {

  clickfun(e) {

    // e.target 是你当前点击的元素

    // e.currentTarget 是你绑定事件的元素

    // #获得点击元素的前一个元素

    e.currentTarget.previousElementSibling.innerHTML

    // #获得点击元素的第一个子元素

    e.currentTarget.firstElementChild

    // #获得点击元素的下一个元素

    e.currentTarget.nextElementSibling

    // #获得点击元素中id为string的元素

    e.currentTarget.getElementById("string")

    // #获得点击元素的string属性

    e.currentTarget.getAttributeNode('string')

    // #获得点击元素的父级元素

    e.currentTarget.parentElement

    // #获得点击元素的前一个元素的第一个子元素的HTML值

    e.currentTarget.previousElementSibling.firstElementChild.innerHTML

  }

},
  • clientY 指的是距离可视页面左上角的距离
  • pageY 指的是距离可视页面左上角的距离(不受页面滚动影响)
  • screenY 指的是距离屏幕左上角的距离
  • layerY 指的是找到它或它父级元素中最近具有定位的左上角距离
  • offsetY 指的是距离它自己左上角的距离

相关文章

  • Vue 及双向数据绑定 Vue事件介绍 以及Vue中的ref获取

    1,vue的双向数据绑定和Vue事件介绍 2,Vue中ref获取dom节点

  • vue 获取节点 获取事件

    vue 生命周期 什么是钩子函数 一开始就执行的 就是钩子函数 vue 钩子函数 也称作为生命周期 befor...

  • vue 获取事件节点

    模版 执行函数 clientY 指的是距离可视页面左上角的距离 pageY 指的是距离可视页面左上角的距离(不受页...

  • DOM utility

    DomEvent 绑定事件,解绑事件,阻止默认事件,获取事件状态等 DomUtil 获取DOM节点,修改样式,设置...

  • HTML DOM

    DOM(Document Object Model)文档对象模型 获取节点 节点属性 样式 事件 节点关系 创建/...

  • vue3的setup中使用路由

    1.通过getCurrentInstance,获取vue 实例,之后在根节点$root中获取router 或者使用...

  • 兼容性(js)

    DOM节点获取 事件event获取源 3.获取ClassName问题 innertext兼容性 5.设置监听事件

  • 去除点击事件300ms延迟 (使用了vue之后)

    因为习惯用vue了,再回到以前 采用获取dom节点来操作的写法 就觉得很麻烦。我在 click 事件里面加了 ta...

  • vue ref 和 $event 事件对象

    ref: 在标签上添加 ref="name" , 表示获取当前元素节点 ---------获取事件对象-----...

  • Event事件

    target:事件属性,返回事件的目标节点(触发该事件的节点),如生成事件的元素,文档或窗口 获取方式的兼容问题:...

网友评论

      本文标题:vue 获取事件节点

      本文链接:https://www.haomeiwen.com/subject/hkgqvhtx.html