首页 > 其他分享 >[vue] event.currentTarget和 event.target的区别

[vue] event.currentTarget和 event.target的区别

时间:2023-10-01 14:06:03浏览次数:30  
标签:vue console log 元素 currentTarget event target


<div class="aaa" @click="handleClick($event)">
  <div class="bbb"></div>
</div>
handleClick(event) {
  // 是你绑定事件的元素aaa
  console.log(event.currentTarget);
  // 是你当前点击的元素bbb
  console.log(event.target);
},

event.target返回的是,触发事件的元素
event.currentTarget返回的是,绑定事件的元素



参考:

关于event.currentTarget和 event.target的实际区别


标签:vue,console,log,元素,currentTarget,event,target
From: https://blog.51cto.com/u_12881709/7673845

相关文章

  • [vue]在鼠标点击处,画点,并弹窗显示两个点的距离
    <template><divclass="sandbox"><divclass="road"@click="handleClick($event)"><divv-for="(point,pointIndex)inmarkPoints":key="pointIndex......
  • [js] 图解 event.pageX event.clientX event.offsetX getBoundingClientRect
    event.clientX、event.clientY鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性event.pageX、event.pageY类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性,但得到了......
  • VScode中下载了插件但是无法找到SSH Target连接服务器的解决方法(CANNOT find SSH Targ
    VSCode版本vscodeversion:(version1.82)已下载扩展installedextensions:Remote-SSHv0.106.4Remote-SSH:EditingConfigurationFilesv0.86.0RemoteDevelopmentv0.24.0WSLv0.81.3几天前我从pycharm转战vscode,在连接服务器时遇到了一些问题。根据一些较为古早的......
  • Vue双向数据绑定原理-下
    Vue双向数据绑定原理-下这一篇文章主要讲解Vue双向数据绑定的原理,主要是通过Object.defineProperty()来实现的,这里我们手写Vue双向数据绑定的原理。首先我提出一个需求,我的需求是,快速监听对象中所有属性的变化。首先得要有一个对象,对象的定义代码如下:<script>letobj={......
  • 你知道Vue 3.0中Treeshaking特性吗?
    介绍Vue3.0引入了Tree-shaking特性,旨在优化构建过程并减小最终生成的代码大小。Tree-shaking是一种在构建时移除未使用代码的技术,通过分析模块的依赖关系,将没有被引用的部分从最终的打包文件中排除掉。这可以大大减少应用的体积,提高性能。举个通俗一点的例子:当我们开发一个应用程......
  • Vue双向数据绑定原理-中
    defineProperty方法defineProperty除了可以动态修改/新增对象的属性以外,还可以在修改/新增的时候给该属性添加get/set方法,从而实现数据劫持。definePropertyget/set方法特点只要通过defineProperty给某个属性添加了get/set方法,那么以后只要获取这个属性的值就会自动调用g......
  • 【RuoYi移动端】uni-app中通过vuex的store来实现全局变量的修改和读取
    一、在store文件中新建csjVar.js文件constcsjVar={csjMess:[{aaa:"ok"},{bbb:"no"}]}exportdefaultcsjVar二、修改store文件中新建index.js文件importVuefrom'vue'importVuexfrom'vuex'importuserfrom'@/store/modules/user�......
  • vue:自定义validator/验证规则([email protected])
    一,官方文档地址:https://element-plus.gitee.io/zh-CN/component/form.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%A0%A1%E9%AA%8C%E8%A7%84%E5%88%99二,js代码:123456789101112131415161718192021222324252627282930313233343536373......
  • vue:el-table在resize时报错([email protected])
    一,报错信息:Uncaughtruntimeerrors:×ERRORResizeObserverloopcompletedwithundeliverednotifications.athandleError(webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:299:58)ateval(webpack-internal:///./node_modules/webpa......
  • vue处理响应式的思路
    首先看如下js代码leta='张三'console.log(a)//当前页面展示的是张三a='李四'首先页面刚开始渲染的时候数据a为张三,之后将a修改为了李四以后页面不会发生改变,但是数据已经修改了,vue为了解决这一问题,采用响应式的办法。通过对象的defineProperty方法,在回调函数中监听;......