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点击事件获取当前元素对象的更多相关文章

  1. Vue.js @click点击无效?

    原因, 那个点击的元素, 没有在 <div id="app"></div>里面

  2. 一段简单的代码记录如何通过 js 给 HTML 设置自定义属性，并且通过点击事件获取到所设置的自定义属性值

    for (var i = 0; i <= 5; i++) { const divJoinDay = document.createElement("div"); divJoi ...

  3. js模拟点击事件实现代码

    js模拟点击事件实现代码 类型:转载 时间:2012-11-06 在实际的应用开发中,我们会常常用到JS的模事件,比如说点击事件,举个简单的例子,点击表单外的"提交"按钮来提交表单 ...

  4. js click 与 onclick 事件绑定,触发与解绑

    click 与 onclick 1.onclick 事件会在对象被点击时发生. <input id="btn1" type="button" onclic ...

  5. ［转］iOS Safari 中click点击事件失效的解决办法

    iOS Safari 中click点击事件失效的解决办法 问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素 ...

  6. VUE.JS 窗口发生变化时，获取当前窗口的高度。

    VUE.JS # 窗口发生变化时,获取当前窗口的高度. mounted () { const that = this; window.onresize = () => { return (() ...

  7. IOS - Safari中click点击事件无效

    做web移动端页面时,安卓端一点问题也没,发现在ios真机上点击事件无效,发现Safari下只有默认可点击的元素才click点击事件,像span div等元素是不具有点击事件的. 解决问题四种方式: ...

  8. vue click事件获取当前元素属性

    Vue可以传递$event对象 <body id="app"> <ul> <li @click="say('hello!', $event) ...

  9. 在vue中的点击事件怎么获取当前点击的元素

    首先 vue的点击事件 是用 @click = “clickfun()” 属性 在html中绑定的,在点击的函数中 添加$event 参数就可以比如<button @click = “click ...

随机推荐

  1. 针对Kafka的centos系统参数优化

    TCP网络优化 sudo vim /etc/sysctl.conf vm.max_map_count=655360net.core.rmem_default=262144net.core.rmem_m ...

  2. MySQL 同步复制及高可用方案总结

    1.前言 mysql作为应用程序的数据存储服务,要实现mysql数据库的高可用.必然要使用的技术就是数据库的复制,如果主节点出现故障可以手动的切换应用到从节点,这点相信运维同学都是知道,并且可以实现的 ...

  3. DevOps技能自查表

    前篇提到了DevOps的工作岗位要求,但是没有来的及深入细节,本文根据个人10年多的经验,尽量详细地列举DevOps所需要用到的一些技术和相关参考网站. Linux基础 Linux系统的基本概念: 必 ...

  4. 测试Activity和Fragment的生命周期

    Activity的生命周期有7个函数,Fragment的生命周期有11个函数. Activity生命周期除上述6个方法还有一个Restart()方法,该方法在该Activity从不可见(仍存在)到重新 ...

  5. PTA数据结构与算法题目集(中文) 7-35 城市间紧急救援 (25 分)

    PTA数据结构与算法题目集(中文)  7-35 城市间紧急救援 (25 分) 作为一个城市的应急救援队伍的负责人,你有一张特殊的全国地图.在地图上显示有多个分散的城市和一些连接城市的快速道路.每个城市 ...

  6. shell查询目标jvm的perm占比

    #查询指定进程号下面的方法区使用率,jdk1.7是perm,jdk1.8是metaspace function get_perm_use_percent() { pid="$1" ...

  7. Linux基础;Day07

    dns服务  dns的作用:地址解析 IP -> 域名(反向)  域名 -> IP(正向) 类型 主域名服务器 负责维护一个区域的所有域名信息,是特定的所有信息的权威信息源,数据可以修改. ...

  8. python工业互联网监控项目实战2—OPC

    OPC(OLE for Process Control)定义:指为了给工业控制系统应用程序之间的通信建立一个接口标准,在工业控制设备与控制软件之间建立统一的数据存取规范.它给工业控制领域提供了一种标准 ...

  9. 最小生成树算法【图解】--一文带你理解什么是Prim算法和Kruskal算法

    假设以下情景,有一块木板,板上钉上了一些钉子,这些钉子可以由一些细绳连接起来.假设每个钉子可以通过一根或者多根细绳连接起来,那么一定存在这样的情况,即用最少的细绳把所有钉子连接起来. 更为实际的情景是 ...

  10. 基础类封装-pymysql库操作mysql封装

    import pymysql from lib.logger import logger from warnings import filterwarnings filterwarnings(&quo ...