vue.js click点击事件获取当前元素对象
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>
我们来看一下javascript文档上有关event标准属性的介绍：
| 属性 | 描述 |
|---|---|
| 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);
}
}
Event对象的一些兼容性写法
//获得event对象兼容性写法
event || (event = window.event);
//获得target兼容型写法
event.target||event.srcElement
//阻止浏览器默认行为兼容性写法
event.preventDefault ? event.preventDefault() : (event.returnValue = false);
//阻止冒泡写法
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
vue.js click点击事件获取当前元素对象的更多相关文章
- Vue.js @click点击无效?
原因, 那个点击的元素, 没有在 <div id="app"></div>里面
- 一段简单的代码记录如何通过 js 给 HTML 设置自定义属性，并且通过点击事件获取到所设置的自定义属性值
for (var i = 0; i <= 5; i++) { const divJoinDay = document.createElement("div"); divJoi ...
- js模拟点击事件实现代码
js模拟点击事件实现代码 类型:转载 时间:2012-11-06 在实际的应用开发中,我们会常常用到JS的模事件,比如说点击事件,举个简单的例子,点击表单外的"提交"按钮来提交表单 ...
- js click 与 onclick 事件绑定,触发与解绑
click 与 onclick 1.onclick 事件会在对象被点击时发生. <input id="btn1" type="button" onclic ...
- ［转］iOS Safari 中click点击事件失效的解决办法
iOS Safari 中click点击事件失效的解决办法 问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素 ...
- VUE.JS 窗口发生变化时，获取当前窗口的高度。
VUE.JS # 窗口发生变化时,获取当前窗口的高度. mounted () { const that = this; window.onresize = () => { return (() ...
- IOS - Safari中click点击事件无效
做web移动端页面时,安卓端一点问题也没,发现在ios真机上点击事件无效,发现Safari下只有默认可点击的元素才click点击事件,像span div等元素是不具有点击事件的. 解决问题四种方式: ...
- vue click事件获取当前元素属性
Vue可以传递$event对象 <body id="app"> <ul> <li @click="say('hello!', $event) ...
- 在vue中的点击事件怎么获取当前点击的元素
首先 vue的点击事件 是用 @click = “clickfun()” 属性 在html中绑定的,在点击的函数中 添加$event 参数就可以比如<button @click = “click ...
随机推荐
- .NET(C#)实现桌面背景切换(控制台应用程序,windows服务版的未实现成功)
AdvancedBackgroundJimmy.Program.cs using AdvancedBackground; using Microsoft.Win32; using System; us ...
- A - 你能数的清吗 51Nod - 1770(找规律)
A - 你能数的清吗 51Nod - 1770(找规律) 演演是个厉害的数学家,他最近又迷上了数字谜.... 他很好奇 xxx...xxx(n个x)*y 的答案中 有多少个z,x,y,z均为位数只有一 ...
- 【Jenkins】使用 Jenkins REST API 配合清华大学镜像站更新 Jenkins 插件
自从去年用上了 Jenkins 进行 CI/CD 之后,工作效率高了不少,摸鱼的时间更多了.不过 Jenkins 好是好,但在功夫网的影响下,插件就是经常更新不成功的,就像下面这样子: 查了不少资料, ...
- Vertica的这些事（十一）——-Vertica备份元数据信息
---备份资源池 SELECT 'CREATE RESOURCE POOL ' || name || CASE WHEN memorysize IS NULL THEN ' ' ELSE ' MEMO ...
- 手工注入——sql server (mssql)注入实战和分析
前言 首先要对sql server进行初步的了解.常用的全部变量@@version:返回当前的Sql server安装的版本.处理器体系结构.生成日期和操作系统.@@servername:放回运行Sq ...
- [原创] 关于步科eview人机界面HMI的使用 - HMI做Slave - Modbus RS485通讯
做测试设备,或者自动化设备常常用到HMI 触摸屏 我有个案子用到了 步科的eview 触摸屏 型号 ET070 我的是单片机主板 控制 HMI显示,通讯用485 MODBUS 单片机板充当 主控 , ...
- fdisk分区规划和添加wap交换空间
分区规划和添加wap交换空间 1 案例1:硬盘分区及格式化 注意:fdisk只能分区小容量的磁盘 1.1 问题 本例要求熟悉硬盘分区结构,使用fdisk分区工具在磁盘 /dev/vdb 上按以下要 ...
- Java工程中如何读取配置文件中参数信息
Java中读取配置文件中参数: 方法一:通过JDK中Properties来实现对配置文件的读取. Properties主要用于读取Java的配置文件,不同的编程语言有自己所支持的配置文件,配置文件中很 ...
- python--django中一些有用的工具引入路径
django.shortcuts render:渲染前端页面 redirect:跳转到其他页面 django forms:表单验证 # 定义 class Form(forms.Form): name ...
- 家庭版记账本app开发完成
经过这几天关于android的相关学习,对于家庭版记账本app以及开发结束. 实现的功能为:用户的注册.登录.添加支出账单.添加收入账单.显示所有的该用户的账单情况(收入和支出).生产图表(直观的显示 ...