vue中点击获取相应元素

2023-05-16

在vue中通过点击事件获取上一个标签、父标签、第一个子标签等元素。( 以下元素都是以所点击的元素进行查找 )

e.target 获取当前点击的元素
e.currentTarget 获取绑定事件的元素
e.currentTarget.previousElementSibling 获取前(上)一个元素
e.currentTarget.parentElement 获取父元素
e.currentTarget.firstElementChild 获取第一个子元素
e.currentTarget.nextElementSibling 获取后(下)一个元素
e.currentTarget.getAttributeNode('class') 获得点击元素的class属性
<div class="box_home">
  box_home
  <div class="box_pre">box_pre</div>
  <div class="box" @click="eleclick($event)">
    <div class="box_item">box_item</div>
    <div class="box_item2">box_item2</div>
  </div>
  <div class="box_next">box_next</div>
</div>


eleclick(e){
  console.log("当前点击的元素");
  console.log(e.target);
  console.log("上一个标签");
  console.log(e.currentTarget.previousElementSibling);
  console.log("父标签");
  console.log(e.currentTarget.parentElement);
  console.log("第一个子标签");
  console.log(e.currentTarget.firstElementChild);
  console.log("下一个标签");
  console.log(e.currentTarget.nextElementSibling);
  console.log("绑定事件的标签");
  console.log(e.currentTarget);
  console.log("获得点击元素的class属性");
  console.log(e.currentTarget.getAttributeNode('class'));
}

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue中点击获取相应元素 的相关文章

  • vue3.0删除node_modules 无用的依赖

    安装插件 npm i depcheck 查看无用的插件 npx depcheck 对应删除 npm uninstall kd layout
  • vue3 vue-router 钩子函数

    全局路由守卫 vue router4 0中将next取消了 可写可不写 return false取消导航 undefined或者是return true验证导航通过 router beforeEach to from gt next是可选参
  • 生产环境的域名地址与后端给的接口地址不一样时的配置(vue)

    1 找到 config dev env js 文件 module exports merge prodEnv NODE ENV development API ROOT http com 本地开发时用的域名 2 找到 config prod
  • java上传图片、文件和富文本内容到服务器上,查看和删除文件

    1 上传富文本内容 前端的富文本内容传到后端 将富文本内容拼接成html页面代码 将内容转换成html文件上传到服务器指定位置进行存储 String profile data xiangmu linux服务器上项目文档存放目录 String
  • Vue2运行报错SyntaxError: Cannot use import statement outside a module

    问题描述 像配置vue3那样配置vue config js的路径代理 代替src后 报错 语法错误 不能在模块外部使用导入语句 原因 模块语法一个是CommonJS module 一个是 ES6 module vue config js里的
  • 值得收藏的UmiJS 教程

    点击上方关注 前端技术江湖 一起学习 天天进步 前言 网上的umi教程是真的少 很多人都只写了一点点 很多水文 所以打算自己写一篇 自己搭建umi 并封装了一下常用的功能 并用到公司实际项目中 umi介绍 Umi 是什么 Umi 中文可发音
  • 微信pc端浏览器打开页面空白的问题

    今天写了一个web项目 用chrome浏览器 手机端微信你打开都没问题 但是在pc端微信打开后是空白的 于是我重新做了一个空白的vue项目 用pc端微信浏览器是可以打开的 慢慢调试发现是语法的问题 一步一步减去组件 再一步一步加上组件 最终
  • 前端大屏常用的适配方案

    假设我们正在开发一个可视化拖拽的搭建平台 可以拖拽生成工作台或可视化大屏 或者直接就是开发一个大屏 首先必须要考虑的一个问题就是页面如何适应屏幕 因为我们在搭建或开发时一般都会基于一个固定的宽高 但是实际的屏幕可能大小不一 接下来我们就尝试
  • vue-lazyload基础实例(基于vue2.0和vue-router2.0)

    首先引入依赖 import Vue from vue import Router from vue router import VueLazyload from vue lazyload 配置vue lazyload Vue use Vue
  • vue prop属性使用方法小结

    Prop 一 基本用法 Prop的基本用法很简单 作用是在子组件中接收父组件的值 父组件传值
  • Vue-cli3更改项目logo图标

    1 图标切成对应大小 2 图标名称后缀与vue原有图标logo名称 后缀一致 favicon ico 并替换 3 vue项目根目录下 新建 vue config js 添加下列代码 module exports pwa iconPaths
  • H5查看pdf文件(pdfh5)

    我用的是 pdfh5 来查看的H5中的pdf文件 使用 pdfh5 插件来打开 pdf文件 下面是两种使用方法 方法一 二都可以 但是我在使用方法二时有卡顿现象 可能是因为未开启懒加载 方法二中的 on 可以打印出来错误信息 使用方法 1
  • vue——vue-video-player插件实现rtmp直播流

    更新 flash已不可再使用 大家另寻出路吧 安装前首先需要注意几个点 vue video player插件 其实就是 video js 集成到 vue 中 所以千万不要再安装 video js 可能会出错 视频流我这个项目选择rtmp格式
  • 【vue3】elementplus日期组件英文转中文

    vue3 elementplus日期组件英文转中文 1 在main js或者main ts中加入 即可解决 import ElementPlus from element plus import element plus dist inde
  • 【vue2+element-ui】el-upload封装多图上传组件

    halo小伙伴们 在开发表单中会有遇到需要多图上传 可动态限制上传的图片数量 大小 支持删除 显示提示语的需求 在这小编带来一个小编自封装用了很久的多图上传组件 话不多说上代码 首先创建一个如 XUploadImgList vue的文件 编
  • vue_域名部署无法访问后端

    前言 目前部署的比较另类 因为服务器为 windows 目前还不是很会 nginx 所以现在就只能在服务器上安装 nodejs 然后直接使用 npm run dev 命令行的方式运行项目 遇到的坑 使用ip访问前端的时候 就可以访问 但是通
  • 大数据毕业设计之前端03:logo、menu的折叠展开实现

    关键字 BuildAdmin pinia logo aside menu 菜单折叠 Vue ElementUI 前言 上一篇文章中 借助aside的实现讲了一些开发的小技巧 以及css的解读 本篇文章主要写一下如何填充aside的内容 as
  • 黑豹程序员-自定义表单实现门户自定制

    功能 用户可以实现欢迎页面自己定制 数据由数据库表进行维护 原理 页面利用div进行布局 拖动div记录其坐标 并写库 页面加载时从数据库表中读取div坐标和数据即可 效果图
  • vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果

    一 实现效果 使用echarts实现省市地图绘制 根据数据在地图显示柱状图 根据数据显示数据 涟漪效果 二 实现方法 1 安装echarts插件 npm install echarts save 2 获取省市json数据 https dat
  • Vue学习之watch侦听器:案例实现翻译功能

    watch侦听器 作用 监视数据的变化 当数据发生变化时 执行一些业务逻辑或者是异步操作 执行的场景例如在线翻译 当文本区域的内容发生变化时 会发生翻译内容的同时更新 语法 简单的写法 简单数据类型 可以直接的进行监听 完整的写法 添加额外

随机推荐

  • Linux获取机器码

    1 准备工作 安装php xff0c 并已经配置好环境变量path 2 运行hardware sh获取机器码 shell gt php span class token punctuation span span class token o
  • Windows远程桌面卡顿问题(包含网络调优)

    注 xff1a 以下操作需管理员权限执行CMD 关闭自动调节 xff1a netsh interface tcp span class token function set span global autotuninglevel 61 di
  • ESXI VIB升级报错

    一 兼容性问题 1 通过VIB升级ESXI时 xff0c 可能会出现类似报错 span class token namespace DependencyError span VIB LSI bootbank scsi mpt3sas 04
  • MySQL 8.0安装

    1 安装MySQL 8 0 Server shell gt dnf span class token operator span y install 64 mysql 2 开启服务 shell gt systemctl span class
  • 华为镜像启动报错

    shell gt span class token function rm span span class token operator span etc span class token operator span udev span c
  • ThinkPad T14s 安装Ubuntu22踩坑记

    讲一个我装机历经的一个小故事 首先 xff0c 花个万把块 xff0c 买个心仪的撸码神奇 xff0c 我买的是2022款ThinkPad T14s 官网关注了好久就是不出32G内存版本的 xff0c 无奈只能买一个16G内存版本的 xff
  • STM32F429入门(二十一):SPI协议及SPI读写FLASH

    IIC主要用于通讯速率一般的场合 xff0c 而SPI一般用于较高速的场合 一 SPI协议简介 SPI 协议是由摩托罗拉公司提出的通讯协议 Serial Peripheral Interface xff0c 即串行外围设 备接口 xff0c
  • Dell清除BIOS密码及硬盘锁

    1 获取System Number F2进入BIOS xff0c 点击Unlock出现以下界面 xff0c 记录System Number 2 获取password 访问https bios pw org xff0c 将记录的System
  • 论文阅读:Learning Deep Features for Discriminative Localization(CAM)

    Learning Deep Features for Discriminative Localization 文章目录 Learning Deep Features for Discriminative Localization摘要1 引言
  • 上下文切换

    上下文切换 xff08 有时也称做进程切换或任务切换 xff09 是指 CPU 从一个 进程或线程 切换到另一个进程或线程 进程 xff08 有时候也称做任务 xff09 是指一个 程序运行的 实例 在 Linux 系统中 xff0c 线程
  • CAS服务器搭建

    一 CAS是Central Authentication Service的缩写 xff0c 中央认证服务 xff0c 一种独立开放指令协议 CAS 是 Yale 大学发起的一个开源项目 xff0c 旨在为 Web 应用系统提供一种可靠的单点
  • 如何查linux服务器的带宽占用?哪些进程占用带宽?

    前言 操作系统 xff1a Linux 操作环境 xff1a Centos7 ubuntu linux查看服务器带宽具体方法 一 使用speedtest cli命令查看下载和上传最大流量值 因为命令是python的 xff0c 所以需要先下
  • ESP8266调试方法

    ESP8266在开发的过程中无法进行仿真 xff0c 所以 xff0c 为了排查问题 xff0c 我们只能用别的方法 xff0c 下面一起来看看常用的两种方法 xff1a 添加UART打印和Fatal 查证方法 添加UART打印 对于 ES
  • 二、操作系统进程管理(4)——处理机调度(2)进程调度的时机、切换与过程、方式、评价指标

    3 进程调度的时机 切换与过程 方式 xff08 1 xff09 进程调度 xff08 低级调度 xff09 的时机 xff1a 什么时候需要进程调度 xff1f 主动放弃 xff1a 进程正常终止 运行过程中发生异常而终止 主动阻塞 xf
  • eclipse保存失败/无法保存/字符编码问题/JAVA

    eclipse保存失败 无法保存 字符编码问题 JAVA 在eclipse中单击 保存 按钮时出现如下提示对话内容 xff08 框 xff09 未能完成保存 原因 xff1a 使用 GBK 字符编码时 xff0c 无法映射某些字符 更改编码
  • java运算符(a++和++a)

    提示 xff1a 文章主要说明a 43 43 和 43 43 a系列 xff0c 附带其余信息 a 43 43 和 43 43 a的不同 xff1a 不同点是a 43 43 是先赋值再 43 1 xff0c 而 43 43 a则是先 43
  • 计算统计笔记整理(持更)

    bootstrap方法 基本思想 xff1a 模拟 目的 xff1a 计算 xff08 任意估计的 xff09 标准误差 偏差和置信区间 分类 xff1a 1 参数化bootstrap 分布形式已知 xff0c 或可由样本估计出分布 xff
  • Javascript 分析Javascript事件机制和Settimeout讲解

    线程 JavaScript特点就是单线程 xff0c 理解是 xff0c 同一个时间只能做一件事 那么 xff0c 为什么JavaScript不能有多个线程呢 xff1f 现在我们假设 xff0c JavaScript同时有多个线程 xff
  • 规划人生之一: 嵌入式系统开发or算法开发

    这些天一直为一个问题所烦扰 不知道今后改把精力投入到嵌入式系统如arm dsp等的开发上还是在图像的压缩算法上 由于我们做的是嵌入式系统 在arm开发上还有嵌入式os 所以比较烦杂 而在dsp上还要进行mpeg以及264的开发 不知道那个更
  • vue中点击获取相应元素

    在vue中通过点击事件获取上一个标签 父标签 第一个子标签等元素 以下元素都是以所点击的元素进行查找 e target 获取当前点击的元素 e currentTarget 获取绑定事件的元素 e currentTarget previous