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 相关文章推荐
JavaScript实现快速排序(自已编写)
Dec 19 Javascript
屏蔽script注入小例子
Nov 12 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
Nov 22 Javascript
node.js中的fs.mkdirSync方法使用说明
Dec 17 Javascript
javascript性能优化之事件委托实例详解
Dec 12 Javascript
解决拦截器对ajax请求的拦截实例详解
Dec 21 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
Sep 15 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
Apr 24 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
Dec 20 Javascript
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 Javascript
jQuery实现动态操作table行
Nov 23 jQuery
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 Undefined index和Undefined variable的解决方法
2008/03/27 PHP
PHP XML备份Mysql数据库
2009/05/27 PHP
PHP 中文处理技巧
2010/04/25 PHP
php whois查询API制作方法
2011/06/23 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
关于使用 jBox 对话框的提交不能弹出问题解决方法
2012/11/07 Javascript
js获得鼠标的坐标值的方法
2013/03/13 Javascript
jQuery.holdReady()方法用法实例
2014/12/27 Javascript
jQuery实现首页顶部可伸缩广告特效代码
2015/04/15 Javascript
jquery实现简单实用的打分程序实例
2015/07/23 Javascript
JS求解三元一次方程组值的方法
2017/01/03 Javascript
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
详解Nodejs之npm&amp;package.json
2017/06/15 NodeJs
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
深入理解javascript prototype的相关知识
2019/09/19 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
2019/11/26 Javascript
Python科学计算环境推荐——Anaconda
2014/06/30 Python
Python操作SQLite数据库的方法详解
2017/06/16 Python
Python微信操控itchat的方法
2019/05/31 Python
Python分析彩票记录并预测中奖号码过程详解
2019/07/09 Python
Anaconda之conda常用命令介绍(安装、更新、删除)
2019/10/06 Python
pytorch获取模型某一层参数名及参数值方式
2019/12/30 Python
Python如何实现在字符串里嵌入双引号或者单引号
2020/03/02 Python
python实现启动一个外部程序,并且不阻塞当前进程
2020/12/05 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
Python使用tkinter实现小时钟效果
2021/02/22 Python
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
珠宝店促销方案
2014/03/21 职场文书
2016年公共机构节能宣传周活动总结
2016/04/05 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书
广告策划的实习心得体会总结!
2019/07/22 职场文书
详解分布式系统中如何用python实现Paxos
2021/05/18 Python
Go语言编译原理之变量捕获
2022/08/05 Golang