如何同时获取点击事件的e和index

最新推荐文章于 2022-11-15 17:36:04 发布
最新推荐文章于 2022-11-15 17:36:04 发布
阅读量798 收藏 1
点赞数
分类专栏： echarts vue.js 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47116639/article/details/112314034
版权
在 Vue 开发中，遇到需要在 v-for 循环内设置点击事件并同时获取点击元素的 item 和 index 的问题。文章作者分享了一个实用方法，即在事件处理函数中通过 $event 和 $index 获取所需信息，解决了这个问题。这种方法既简单又高效，适合初学者参考。
摘要由CSDN通过智能技术生成

功能需求：在用到v-for渲染数据时，点击事件时，既要通过e来获取点击的是哪个item，同时需要通过index来获取点击的是哪个元素设置对应的背景色，我这边想到的方法就是同时需要e，和index在这里插入图片描述
本以为是点击事件handle1后面直接传值就可以了在这里插入图片描述
在这里插入图片描述
但是现实啪啪打脸啊，根本获取不到index，经查找发现(本人很菜，所以查找了一下。。)只需要一个方法就可以了，如下图：
在这里插入图片描述
这样就可以同时获取e和index了太香了。。
随便写写，希望有用，感恩有你

程序媛-sunny
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
事件对象e 点击 事件对象内光标位置获取 键盘按下对应的编码 实时获取坐标原点 鼠标跟随
mx0102的博客
01-18 261
事件对象e 点击 事件对象内光标位置获取 键盘按下对应的编码 实时获取坐标原点 鼠标跟随
JQuery的click事件参数e
大千世界的博客
07-19 1万+
通过 $().unbind('click').click(function(e){......}) ,这种方式触发的点击事件中, e 代表的含义: e就是element 或者可以理解为是一个object, 通过e.target可以得到dom对象的引用,即把dom元素传给jquery选择器. 例子: Html片段: <div> <span class="DELET...
有关javascript中事件对象e
qq_44718039的博客
11-15 2696
js中的事件对象e
点击事件冲突解决
Silence_Sep的博客
10-28 712
点击事件冲突 clickItem(e,index,item) { if(e.target.tagName.toLowerCase() === 'a'){ this.readHistory(index,item) }else{ this.list[index].checked = !this.list[index].checked ...
事件函数function(e){}中e的问题
casanover
09-26 1万+
简单来说就是指向了当前发生的事件（click、mouseover等等），保存了当前事件的信息。如鼠标点击事件，有鼠标的坐标信息。 其中，e是标准浏览器传递进去的事件参数，低版本IE不会传递，事件参数放置在window.event对象中，所以兼容低版本的IE要加上这句e=e||window.event; 使用for in来输出一点东西： 无标题文档 function f
extjs 04_grid 单击事件新发现
12-09
下面是一个简单的示例，展示了如何监听`cellclick`事件并获取点击的单元格数据： ```javascript grid.addListener('cellclick', cellclick); function cellclick(grid, rowIndex, columnIndex, e) { var record =...
JavaScript实现获取用户单击body中所有A标签内容的方法
10-19
在JavaScript中，浏览器兼容性问题需要我们同时处理`event`和`e`两个变量，因为不同浏览器可能使用不同的方式传递事件对象。因此，我们使用`e = e || event`来确保始终可以访问到事件对象。 在`getUrl`函数内部，...
android获取相册图片和路径的实现方法
09-02
以下是一个详细解释如何在Android 4.4之后获取相册图片和路径的实现方法。 首先，我们需要了解在不同版本的Android中，获取相册图片的Intent API的变化。在早期版本中，通常使用`Intent.ACTION_GET_CONTENT`，并...
VUE中v-on:click事件中获取当前dom元素的代码
12-29
在开发中总是忘记，特意在此记录 关键字： $event (index,$event)>{{item.BedID}} {{item....PS：下面看下v-on:click获取当前事件对象元素 dom元素这样写: <i @click=iconToogle($event) class=iconfont icon-
asp.net获得数据控件事件索引并获取其中值总结
10-28
本篇文章将重点讲解如何在ASP.NET中通过事件处理程序获取数据控件（如GridView）的事件索引以及如何获取控件内的值。 1. **RowCommand事件** 当用户点击数据控件中的按钮或链接按钮时，会触发RowCommand事件。例如...
【补充知识点】e.target指代什么？
O(∩_∩)O
06-06 5030
e.target是目标对象， e.event是目标所发生的事件。 圣诞主题 选择页面： 1 2 3
e.target的用法
热门推荐
qq_36412715的博客
11-22 5万+
target定义： target 属性规定哪个 DOM 元素触发了该事件。 target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。 语法： event.target event.target.nodeName 　　//获取事件触发元素标签名（li，p，div，img，button…） event.target.id　　　　　　//获取事件触发元素id ev...
【JavaScript-事件】target和this的区别？如何阻止冒泡事件？常见的鼠标事件和键盘事件有哪些？
zhaochen1127的博客
09-15 1539
在我们进行target和this的使用中如何区分this的指向问题呢？在js中常用的鼠标事件和键盘事件 盘点在本文，满满干货放心食用。
《前端》e.target的用法--2020年7月15日
BelleDiao的博客
07-15 4591
target定义： target 属性：触发事件的对象的引用（某个dom元素）。当事件处理程序在事件的冒泡或捕获阶段被调用。 target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。 语法： event.target event.target.nodeName 　　//获取事件触发元素标签名（li，p，div，img，button…） event.target.id　　　　　　//获取事件触发元素id event.target.className　　//获取事
js中事件的function（e）中的e和e.target是什么
qq_62693649的博客
08-24 4610
比如此ul包含了3个li元素，事件绑定在ul上，但是当点击li是，打印出来对象的会显示点击来自li。当在一个父元素上绑定了此事件时，但其子元素触发了事件，那么e就指向了子元素，而不是父元素。也可以使用以下方法获取元素的标签名（如li，div），id名，类名等。并且我们可以使用e.target来获取事件触发的元素内容。这个e可以获取具体是哪个元素触发了相关的事件；获取触发事件元素的内容。
JavaScript事件对象、target和this的区别、阻止默认事件、阻止冒泡、事件委托
Dreamer
11-26 675
JavaScript事件对象 event就是一个事件对象，写在侦听函数的小括号里面当形参来看。 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数 事件对象是我们事件的一系列相关数据的集合，根事件相关的信息，如果是鼠标点击事件里面包含了鼠标的相关信息，例如鼠标的坐标等，如果是键盘时间里面就包含了键盘时间的信息，比如用户按下了哪个键。 时间对象可以自己命名，不一定非要使用event，比如可以为event、evt、e等 存在兼容性问题，IE678通过window.ev
vue click事件传递索引index。传递index后event报错，，，，event.currentTarget
笑到世界都狼狈的博客
08-30 3099
首先，对于vue菜鸟及的选中来说，我写了click事件，打印了当前点击的节点信息，是没有任何错误的。但是后面有需求，要传递索引，，，，然后我在参数里在加了一个index，然后event.currentTarget就开始报错了。。。。。。 找百度查看了一番，大概意思是，click本身就自带默认的event事件，所以我在不带参数的时候，打印event事件是没什么问题的，代码如下图所示： 但是接下来，我需要传递一个索引，来控制选中的样式。按照正常的思路，我...
JavaScript之DOM之获取元素、操作元素、自定义属性、节点、事件
m0_63374484的博客
01-23 1691
一、获取元素 1. 根据ID获取（getElementById(ID)获取元素） <div id="time">2022-01-23</div> <script> var element = document.getElementById('time'); console.log(element); console.log(typeof element); console.dir(element);
【JavaEE学习笔记】Maven
love__nana
12-26 1151
Maven A.概述 1.为什么使用Maven eclipse功能已经非常强大，创建项目、编译、打包、导出、发布 这些功能eclipse都能做，但是依赖大量的手工操作，存在以下问题： a.jar包管理混乱 在开发项目的过程中，会使用一些开源框架、第三方工具等 这些都是以jar包的方式被引用 并且有些jar包还回依赖其他的jar包 所有这些相关的jar包都会作为
高德 输入提示实例 绑定点击事件和回车事件
最新发布
06-09
以下是一个绑定点击事件和回车事件的高德输入提示实例： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>高德输入提示</title> <script src="https://webapi.amap.com/maps?v=1.4.15&key=您的key值"></script> <script src="https://webapi.amap.com/ui/1.0/main.js"></script> <link rel="stylesheet" href="https://webapi.amap.com/ui/1.0/ui/misc/MarkerList/examples/css/base.css"> <style> #tip { position: absolute; top: 10px; left: 10px; z-index: 9999; } </style> </head> <body> <input id="keyword" type="text" placeholder="请输入关键字"> <div id="tip"></div> <script> var keyword = document.getElementById('keyword'); var tip = document.getElementById('tip'); var auto = new AMap.Autocomplete({ input: keyword, city: '全国' }); AMap.event.addListener(auto, 'select', function(e) { var poi = e.poi; tip.innerHTML = poi.name + ' ' + poi.address; }); keyword.addEventListener('keydown', function(e) { if (e.keyCode === 13) { // 判断按下的是回车键 var keywords = keyword.value; AMap.plugin('AMap.Autocomplete', function() { var auto = new AMap.Autocomplete({ input: 'keyword' }); AMap.event.addListener(auto, 'select', function(e) { var poi = e.poi; tip.innerHTML = poi.name + ' ' + poi.address; }); auto.search(keywords); // 根据输入值查询 }); } }); </script> </body> </html> ``` 在这个示例中，我们先创建了一个 `AMap.Autocomplete` 对象，用于实现输入提示功能。然后，我们通过 `AMap.event.addListener` 方法，为 `select` 事件绑定了一个回调函数，当用户点击某一个提示项时，就会触发该事件，回调函数中会获取到对应的 `poi` 数据，并在页面上显示出来。 同时，我们也为输入框绑定了一个 `keydown` 事件，当用户按下回车键时，就会触发该事件，回调函数中会根据输入值进行查询，并将查询结果显示在页面上。注意，在查询结果中，我们也需要为每一个结果项绑定点击事件，以实现点击后显示详细信息的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值