e.currentTarget与e.target

2018-06-24 02:06:21来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

e.currentTarget指的是注册了事件监听器的对象,而e.target指的是该对象里的子对象
 
html中
<div id="addBtn" v-on:click="checksBtn($event)" class="everyMes curs checkeds" title="查询">
  <Icon class="iconCommon" style="color:#80848f;" type="search"></Icon><span>查询</span> <span class="triangle"></span><Icon class="imgIcon" type="checkmark-round"></Icon>
</div>
 
css代码:
.checkeds{
  border:1px solid #2d8cf0 !important;
}
 
js代码:
当用e.currentTarget时
 
methods: {
  checksBtn:function(e){
    e.currentTarget.classList.toggle("checkeds");
  }
}
效果:
  

     当点击查询这两个字时 作用在整个最大的id="addBtn" div上

 

当用e.target时
methods: {
  checksBtn:function(e){
    e.target.classList.toggle("checkeds");
  }
}
 效果:

   当点击查询这两个字时 作用在子元素 span上,不会作用在最大的作用在整个最大的id="addBtn" 上

 

总结:结合事件捕获和事件冒泡,e.currentTarget指的是注册了事件监听器的对象,而e.target指的是该对象里的子对象

 

 
 
 
 
 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:腾讯云服务器配置node环境

下一篇:Angular使用总结 ---以密码确认为例实现模版驱动表单的自定义校