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. iOS UmbrellaFramework

    一.umbrella framework 将几个已经封装好的 framework 封装成一个,封装的这种 framework 就是 umbrella framework. Apple 的官方文档中明确 ...

  2. [vijos1460&Metocode P223]拉力赛<LCA>

    题目链接:https://vijos.org/p/1460 http://oj.fjaxyz.com:3389/problem.php?id=223 我不禁开始怀疑,这,真的是最近公共祖先的题吗,我是 ...

  3. Windows 7 NVMe补丁（包括官网下载链接）

    随着NVMe固态硬盘的普遍,很多想使用Windows 7,又想使用NVMe固态硬盘的,不得不打两个NVMe补丁 这两个补丁主要是:KB2990941和KB3087873 32位 百度网盘 64位 百度 ...

  4. [教程]KALI LINUX 2.0 2019 更新国内源

    2019年最新版本KALI 为 KALI 2019.1 下载地址:https://www.kali.org/downloads/ 有的新入门的朋友可能会问,为什么每次都无法手动更新 例如:Update ...

  5. Math常用方法

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  6. JavaScript new 的时候到底发生了什么？

    function Person(name) { this.name = name; } let liLei = new Person('lilei'); console.log(liLiei.name ...

  7. Fiddler插件---将Mapi请求自动转为HTTPRunner测试用例（YAML格式）

    背景 继之前鼓捣出了Mapi解密插件之后,在团队内已经使用了三年之久,一跃成为团队最爱欢迎的测试工具之一(加个之一,低调谦虚一点). 随着团队推行HttpRunner搞接口自动化:编写和维护Case带 ...

  8. vue-cli3引入svg图标全过程以及遇到的坑

    https://blog.csdn.net/weixin_41229588/article/details/101159755 一.配置 1.安装依赖: npm install svg-sprite- ...

  9. DIV+CSS 样式简单布局Tab 切换

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  10. Go中的unsafe

    unsafe 最近关注了一个大佬的文章,文章写的非常好,大家可以去关注下. 微信公众号[码农桃花源] 指针类型 我们知道slice 和 map 包含指向底层数据的指针 什么是 unsafe 为什么会有 ...