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. windows server 2016 远程桌面mstsc DPI（更改文本、应用和其他项目大小） 设置

    windows server 2016 远程桌面mstsc DPI 设置 在高分辨率机器2K,4K,8K,登入使用window远程桌面mstsc时,登入后虽然分辨率变成了和cilent一样分辨率 但是 ...

  2. SQL实战（三）

    一. 查找所有员工自入职以来的薪水涨幅情况,给出员工编号emp_noy以及其对应的薪水涨幅growth,并按照growth进行升序CREATE TABLE `employees` (`emp_no` ...

  3. Vue设置路由跳转的两种方法： <router-link :to="..."> 和router.push(...)

    一.<router-link :to="..."> to里的值可以是一个字符串路径,或者一个描述地址的对象.例如: // 字符串 <router-link to= ...

  4. PTA | 1016 部分A+B (15分)

    正整数 A 的"DA(为 1 位整数)部分"定义为由 A 中所有 DA 组成的新整数 PA.例如:给定 A=3862767,DA=6,则 A 的"6 部分"PA ...

  5. python 终端带颜色的打印文本

    import sys from termcolor import colored, cprint text = colored('Hello, World!', 'red', attrs=['reve ...

  6. python--爬虫（XPath与BeautifulSoup4）

    获取页面内容除使用正则意外,还可以使用XPath,其原理是将html代码转换为xml格式,然后使用XPath查找html节点或元素. 选取节点 XPath使用路径表达式来选取XML文档中的节点或节点集 ...

  7. go 闭包函数

    一.什么是闭包函数? 二.匿名函数可以被赋值给变量并作为值使用: package main import "fmt" func main(){ f() } func f(){ fo ...

  8. 关于Python 迭代器和生成器 装饰器

    Python 简介Python 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言. Python 的设计具有很强的可读性,相比其他语言经常使用英文关键字,其他语言的一些标点符号,它具有比 ...

  9. floyd最小环&&模板

    floyd的核心代码: ;k<=n;k++){ ;i<=n;i++){ ;j<=n;j++){ dis[i][j]=min(dis[i][j],dis[i][k]+dis[k][j] ...

  10. classpath和环境变量设置（转）

    classpath和环境变量设置(转) 在没有设置环境变量之前,我们可以通过直接在应用程序中加带相关信息来运行我们 的程序.比如,我们可以这样开始运行一个java程序: C:\jdk1.3.1\bin ...