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


Posted in Javascript onAugust 07, 2020

Vue.js可以传递$event对象

<body id="app">
 <ul>
 <li v-on:click="say('hello!', $event)">点击当前行文本</li>
 <li>li2</li>
 <li>li3</li>
 </ul>
 <script>
 new Vue({
  el: '#app',
  data: {
  message: 'Hello Vue.js!'
  },
  methods: {
  say: function(msg, event) {
   //获取点击对象  
   var el = event.currentTarget;
   alert("当前对象的内容:"+el.innerHTML);
  }
 }
 })
 </script>
 </body>
属性 描述
bubbles 返回布尔值,指示事件是否是起泡事件类型。
cancelable 返回布尔值,指示事件是否可拥可取消的默认动作。
currentTarget 返回其事件监听器触发该事件的元素。
eventPhase 返回事件传播的当前阶段。
target 返回触发此事件的元素(事件的目标节点)。
timeStamp 返回事件生成的日期和时间。
type 返回当前 Event 对象表示的事件的名称。

currentTarget:currentTarget 事件属性返回其监听器触发事件的节点,即当前处理该事件的元素、文档或窗口。

通俗一点说,就是你的点击事件绑定在哪一个元素上,currentTarget获取到的就是哪一个元素。

target:target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。

通俗一点说,就是你当前点击的是哪一个元素,target获取到的就是哪一个元素。

<li v-for="img in willLoadImg" @click="selectImg($event)">
 <img class="loadimg" :src="img.url" :data-id="img.id" alt="">
</li>

methods: {
 selectImg(event) {
   console.log(event.currentTarget);
   console.log(event.target);
 }
}

补充知识:vue获取当前点击对象的下标,和当前点击对象的内容

<li v-for="(item,index) in tabList" v-on:click="addClass(index,$event)" >{{item.title}}</li>

data里面声明:

data() {
 return {
  tabList: [
  { id: 0, title: "首页1" },
  { id: 1, title: "首页2" },
  { id: 2, title: "首页3" }
  ],
  current:0
 };
 },
methods: {
 addClass: function(index,event) {
  this.current = index;
  //获取点击对象  
  var el = event.currentTarget;
  console.log("当前对象的内容:"+el.innerHTML);
  console.log(this.current)
 }

以上这篇vue.js click点击事件获取当前元素对象的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
Oct 18 Javascript
js 利用className得到对象的实现代码
Nov 15 Javascript
页面定时刷新(1秒刷新一次)
Nov 22 Javascript
10分钟学会写Jquery插件实例教程
Sep 06 Javascript
分享20个提升网站界面体验的jQuery插件
Dec 15 Javascript
js控制页面的全屏展示和退出全屏显示的方法
Mar 10 Javascript
Js+Ajax,Get和Post在使用上的区别小结
Jun 08 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 Javascript
JS中touchstart事件与click事件冲突的解决方法
Mar 12 Javascript
js使用Promise实现简单的Ajax缓存
Nov 14 Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 #Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 #jQuery
vue递归获取父元素的元素实例
Aug 07 #Javascript
在vue中使用Base64转码的案例
Aug 07 #Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 #Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 #Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 #Javascript
You might like
PHP中::、-&amp;gt;、self、$this几种操作符的区别介绍
2013/04/24 PHP
解析php二分法查找数组是否包含某一元素
2013/05/23 PHP
深入PHP empty(),isset(),is_null()的实例测试详解
2013/06/06 PHP
thinkphp的URL路由规则与配置实例
2014/11/26 PHP
javascript 数组学习资料收集
2010/04/11 Javascript
JQuery中$之选择器用法介绍
2011/04/05 Javascript
基于jquery实现漂亮的动态信息提示效果
2011/08/02 Javascript
javascript:void(0)是什么意思示例介绍
2013/11/17 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
2017/03/07 Javascript
Vue实现选择城市功能
2017/05/27 Javascript
nodejs读取并去重excel文件
2018/04/22 NodeJs
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
2018/12/07 Javascript
vue图片加载失败时用默认图片替换的方法
2019/08/29 Javascript
解决axios post 后端无法接收数据的问题
2019/10/29 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
全面解读Python Web开发框架Django
2014/06/30 Python
Python实现文件按照日期命名的方法
2015/07/09 Python
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
python生成n个元素的全组合方法
2018/11/13 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
python 模拟登陆163邮箱
2020/12/15 Python
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?
2015/12/03 面试题
交通事故检查书范文
2014/01/30 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
2014年加油站工作总结
2014/12/04 职场文书
辞职信标准格式
2015/02/27 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
2016年教师节贺卡寄语
2015/12/04 职场文书
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android
Vue3中的Refs和Ref详情
2021/11/11 Vue.js