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. ARDUINO UNO数字引脚端口上电后不稳定状态。

    ARDUINO UNO数字引脚端口上电后不稳定状态. 在使用4*4矩阵键盘时,遇到了输入端的电平无法稳定,一直被识别为高电平. 在发现这一问题后,首先检查程序是否出错.检查后发现程序没有任何问题. 于 ...

  2. [讲解]prim算法<最小生成树>

    最小生成树的方法一般比较常用的就是kruskal和prim算法 一个是按边从小到大加,一个是按点从小到大加,两个方法都是比较常用的,都不是很难... kruskal算法在本文里我就不讲了,本文的重点是 ...

  3. 一文读懂什么是CA证书

    Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE /* Style Definitions */ table.MsoNormalTable ...

  4. 一夜搞懂 | JVM 字节码执行引擎

    前言 本文已经收录到我的 Github 个人博客,欢迎大佬们光临寒舍: 我的 GIthub 博客 学习导图 一.为什么要学习字节码执行引擎? 代码编译的结果从本地机器码转变为字节码,是存储格式发展的一 ...

  5. Day20-tomcat

    tomcat 一.Java及tomcat简介 二.安装JDK及tomcat 1.安装jdk 安装jdk很简单,首先下载网上的jdk安装包,我这边下载的是jdk-8u221-linux-x64.tar. ...

  6. 用python写项目之图书管理系统

    1.功能介绍: (1).添加新书:输入要添加的书名.存放的书架号.价格. (2).修改书架:输入要书名,然后对其修改书架号.价格 (3).删除书架:输入书名,然后对应删除书名.书架号.价格 (4).查 ...

  7. jq日历一周为单位轮播

    简单效果图: 代码如下: <!doctype html> <html lang="en"> <head> <meta charset=&q ...

  8. 【Linux】Apache服务配置

    一. URL 统一资源定位符 http://www.sina.com.cn:80/admin/index.html 二. 环境安装 LAMP 源码包编译安装 版本可以自定义 生产环境 安全 稳定 开发 ...

  9. 跟面试官侃半小时MySQL事务，说完原子性、一致性、持久性的实现

    提到MySQL的事务,我相信对MySQL有了解的同学都能聊上几句,无论是面试求职,还是日常开发,MySQL的事务都跟我们息息相关. 而事务的ACID(即原子性Atomicity.一致性Consiste ...

  10. matplotlib BlendedGenericTransform(混合变换)和CompositeGenericTransform(复合变换)

    2020-04-10 23:31:13 -- Edit by yangrayBlendedGenericTransform是Transform的子类,支持在x / y方向上使用不同的变换.(博主翻译为 ...