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"  >
</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);

原文地址:https://www.cnblogs.com/lina-xiao/p/8331529.html

时间: 2024-10-11 06:53:01

vue.js click点击事件获取当前元素对象的相关文章

vue.js click点击事件获取当前元素对象及获取自定义属性

Vue.js可以传递$event对象 <body id="app"> <ul> <li :data-price="m.price" v-on:click="say('hello!', $event)">点击当前行文本</li> <li>li2</li> <li>li3</li> </ul> <script> new Vue({

js click点击事件bug

<div onclick><a onclick></a></div> 问题:点击a链接,会连带触发div的onclick事件. 解决:a的onclick增加(this,event),如editCourseAttri(this,event),然后 function中相应增加= function(that, event){event.stopPropagation();} 原文地址:https://www.cnblogs.com/Each-Person-Got-

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

for (var i = 0; i <= 5; i++) { const divJoinDay = document.createElement("div"); divJoinDay.style.padding = "6px 30px"; divJoinDay.style.backgroundColor = "#ffffff"; divJoinDay.style.color = "#000"; divJoinDay.st

js模拟点击事件实现代码

js模拟点击事件实现代码 更新时间:2012年11月06日 17:33:33   作者:   我要评论 在实际的应用开发中,我们会常常用到JS的模事件,比如说点击事件,举个简单的例子,点击表单外的“提交”按钮来提交表单.上代码吧 html: 复制代码 代码如下: <h3>请单击“提交”,测试提交按钮的单击事件也被触发了.</h3> <button id="btn">提交</button> <form action="#&q

[转]iOS Safari 中click点击事件失效的解决办法

iOS Safari 中click点击事件失效的解决办法 问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效. 解决办法 解决办法有 4 种可供选择: ?将 click 事件直接绑定到目标?元素(??即 .target)上 将目标?元素换成 

JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题

javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbind('click').click(function(){ //此处填写逻辑代码 }) ------ 因为利用js在页面加载后添加需要点击事件的代码,发现在点击后会代码会执行两次,因为有toggle效果,导致弹窗出现又很快丢失 查了一些资料,发现这是冒泡的原因,需要在点击事件代码中加入阻止冒泡的方法: e.s

Android开发之PullToRefresh的Click点击事件的监听实现长按删除Item

本文为原创博客,出自http://blog.csdn.net/minimicall 到今天为止,搜芽的卖家版本应该来说已经基本完成,攻坚克难的一路过来.速度也控制的比较好. 项目过程进度 从任务分配量上来看,基本还是我个人英雄主义.接下来这样不行.但暂时也没办法,师弟还需要一个学习的过程.智质不错,而且态度端正.相信搜芽买家,他就可以承担更多的开发任务了. 接下来进入正题,说我们的PullToRefresh的点击事件.其实,我是想做长按进入删除的. 见效果图.当然这个是我做出来之后的了,但做出来

阻止click点击事件

遇到一个屏蔽点击事件,以前一般都是通过js控制,阻止事件,今天看到css加一个样式就能屏蔽,来记录一下 //css禁用鼠标点击事件 .test { pointer-events: none; } 随便其他方法也记下吧 1. e.stopPropatation||e.cancelBubble = true jquery禁用a标签 方法1: $(document).ready(function() { $("a").each(function() { var textValue = $(t

使用jquery中的click点击事件时出现重复问题的解决

枪响之后,没有赢家. 疫情之时,没有能闲着的医疗相关人员. 别误会,我不是医疗工作者,只是我们做的项目跟医疗服务相关,在这个时候,又怎么能置身事外呢. 所以就开始加班加点呀,嗯.....加的头昏脑胀,代码都写的有点不顺溜了. 之前做的一个项目,有点问题,点击选项的次数过多的时候会卡住,前天一直没发现问题在哪,今天在翻新的时候找到原因了. 由于选项都是获取数据渲染上去的,点击事件也是在渲染完成后绑定上去的,所以造成了重复触发点击的情况,导致点击次数过多时,页面会卡住. 搜了一下找到了解决方法,由于