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 ...
随机推荐
- iOS 内存管理：从 MRC 到 ARC 实践
对于 iOS 程序员来说,内存管理是入门的必修课.引用计数.自动释放等概念,都是与 C 语言完全不同的. iOS 内存管理的核心是引用计数. 接触 MRC 时遇到最头疼的问题就是:为什么那么多 rel ...
- Windows系统向Ubuntu传输文件
PuTTY传输: 安装PuTTY,然后将PuTTY安装目录下的pscp.exe文件拷贝到/Windows/System32/目录下,在cmd控制台执行命令: # pscp 要传输的文件路径 ubunt ...
- sql 模块sqllit
1.创建数据库表 面对 SQLite 数据库,我们之前熟悉的 SQL 指令都可以用: >>> create_table = "create table books (tit ...
- python——体育竞技
一.体育竞技分析基本规则两个球员,交替用球拍击球发球权,回合未能进行一次击打回合结束首先达到15分赢得比赛 1.自顶向下的设计 #7_game_2.py from random import * de ...
- SpringCloud入门(九)： Zuul 上传&回退&异常处理&跨域
Zuul的上传 1.构建一个上传类 import org.springframework.web.bind.annotation.PostMapping; import org.springframe ...
- Java合并png图片
package org.jimmy.autosearch2019.test; import java.awt.Graphics; import java.awt.image.BufferedImage ...
- codeforces 1038a（找最长的前k个字母出现相同次数的字符串）
codeforces 1038a You are given a string s of length n, which consists only of the first k letters of ...
- VLAN、Trunk，以太通道及DHCP
VLAN.Trunk,以太通道及DHCP 案例1:Vlan的划分 案例2:配置trunk中继链路 案例3:以太通道配置 案例4:DHCP服务配置 1 案例1:Vlan的划分 1.1 问题 VLAN(虚 ...
- flask-script的基本使用
Flask-Script flask-script的作用是可以通过命令行的形式来操作Flask.例如通过命令跑一个开发的服务器.设置数据库等. 命令的添加方式 1 .使用manage.command: ...
- json文件操作
1.把字典或list转换成字符串方法 json.dumps() 2.把字符串转换成字典方法 json.loads() 3.indent 存储文件时每行加缩进数 4.ensere_asci 文件中有中文 ...