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 ...
随机推荐
- 树形dp技巧，多叉树转二叉树
今天复习树形dp时发现一道比较古老的题,叫选课,是树形dp的一道基础题,也是多叉树转二叉树应用的模版题 多叉树转二叉树的应用非常广泛,因为如果一个节点的儿子太多,一个一个存下来不方便去查询,并且会增加 ...
- 基于 HTML5 WebGL 的楼宇智能化集成系统（一）
前言 随着现代通信技术.计算机技术.控制技术的飞速发展,智能建筑已经成为现代建筑发展的主流.智能建筑是以建筑物为平台,兼备信息设施系统.信息化应用系统.建筑设备管理系统.公共安全系统等.集 ...
- Web 环境设置
修改最大打开文件数量 ulimit -n 100000 修改创建文件的最大值 #/etc/security/limits.conf * soft nofile 262140 * hard nofile ...
- STM32F103ZET6 GPIO的使用
1.GPIO简介 STM32F103ZET6有多个GPIO组,如GPIOA.GPIOB.GPIOC...等等.每个GPIO组具有16个IO口. GPIO组的寄存器都是类似的,每个GPIO组都有2个32 ...
- ALPN(Application Layer Protocol Negotiation)
ALPN (Application Layer Protocol Negotiation)是TLS的扩展,允许在安全连接的基础上进行应用层协议的协商.ALPN支持任意应用层协议的协商,目前应用最多是H ...
- PTA | 1010 一元多项式求导 (25分)
设计函数求一元多项式的导数.(注:xn(n为整数)的一阶导数为n*xn-1.) 输入格式: 以指数递降方式输入多项式非零项系数和指数(绝对值均为不超过1000的整数).数字间以空格分隔. 输出格式: ...
- 一天学一个Linux命令：第二天 cd pwd
文章更新于:2020-03-08 注:本文参照 man pwd 手册,并给出使用样例. 文章目录 一.命令之 `cd` 和 `pwd` 1.命令介绍 2.语法格式 3.使用样例 4.pwd 参数 5. ...
- hadoop(八)集群namenode启动ssh免密登录(完全分布式五)|10
前置章节:hadoop集群配置同步(hadoop完全分布式四)|10 启动namenode之前: 1. 先查看有无节点启动,执行jps查看,有的话停掉 [shaozhiqi@hadoop102 ~]$ ...
- alg-查找只出现一次的数
//只有2个数出现1次,其余的数都出现2次 class Solution { public: vector<int> singleNumber(const vector<int> ...
- k8s~helm镜像版本永远不要用latest
对于容器编排工具k8s来说,你可以使用它规定的yaml格式的脚本,使用客户端kubectl来与k8s进行通讯,将你定义好的yaml部署脚本应用到k8s集群上,而这对yaml脚本一般来说都是很像的,就是 ...