zoukankan      html  css  js  c++  java
  • e.currentTarget与e.target

    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指的是该对象里的子对象

     
     
     
     
     
  • 相关阅读:
    02.jwt单点登录
    04.RBAC
    COM interop
    C++、c#互调用之VC6 调用 VC6 COM
    Type Library Importer (Tlbimp.exe)
    C++、C#互调用之C++ 调用C# dll
    VS tools
    Type Library to Assembly 转换摘要
    7个顶级心理预言
    c++、C#互调用之c# 调用 vc6 COM
  • 原文地址:https://www.cnblogs.com/ericLJ/p/9049963.html
Copyright © 2011-2022 走看看