event.target获取点击元素，判断元素并删除其父级节点

最新推荐文章于 2024-08-19 19:57:30 发布

崖间陋室一小屋

最新推荐文章于 2024-08-19 19:57:30 发布

阅读量4.4k

点赞数 2

分类专栏： js 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/belladong126/article/details/110433954

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<div onclick="onClose(event)">
	...
</div>

function onClose(ev){
	if(ev.target.attributes['class'].nodeValue=="closeicon"){
		ev.target.parentNode.parentNode.removeChild(ev.target.parentNode)
	}
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

崖间陋室一小屋

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

【Vue】Vue中获取当前点击元素的父元素、子元素、兄弟元素。如何隐藏指定元素的父级元素？

余浩的博客

05-23

1436

Vue如何获取当前点击元素？获取父元素、子元素、兄弟元素呢？如何隐藏指定元素的父级元素？通过绑定点击事件：例如： <button class="delete-btn" @click="delete($event, roomItem)">删除</button> /** * @description: 删除指定的房间 */ delete(event:any, roomItem:any) { let currentTarget = event.currentTarge

搞懂事件基础

langmanboy的博客

04-18

293

事件 1. 事件基础 1-1 什么是事件？在文档、浏览器、标签元素等元素在特定状态下触发的行为即为事件，比如用户的单击行为、表单内容的改变行为即为事件，我们可以为不同的事件定义处理程序。 JS 使用异步事件驱动的形式管理事件事件类型：JS 为不同的事件定义的类型，也可以称为事件名称，有鼠标，指针，键盘，表单，用于界面，用户界面等事件类型事件目标：事件目标指产生事件的对象，比如 a 标签被点击那么 a 标签就是事件目标。元素是可以嵌套的，所以在进行一次点击行为时可能会触发多个事件目标事件处

参与评论您还未登录，请先登录后发表或查看评论

Vue 点击获得父元素，子元素，兄弟元素（DOM操作）

qq_42709302的博客

11-03

4302

<ul @click ="clickfun($event)"> <li></li> </ul> methods: { clickfun(e) { e.target //是你当前点击的元素 e.currentTarget //是你绑定事件的元素 //获得点击元素的前一个元素 e.currentTarget.previousElementSibling.innerHTML //获得点击元素的第一个子元素

详解vue添加删除元素的方法

12-11

event.target.tagName

最新发布

weixin_62439904的博客

08-19

118

【代码】event.target.tagName。

event.target

qq_34332073的博客

11-21

288

event.target经常使用的属性有： event.target.nodeName 　　 //获取事件触发元素标签name event.target.id　　　　　　　//获取事件触发元素id event.target.className　　 //获取事件触发元素classname event.target.innerHTML　　 //获取...

JavaScript中的Event.target

qq_54334713的博客

04-26

7617

event.target 一般情况下我们获取目标事件源都是谁是调用者谁就是事件源，但是当有批量的DOM需要操作的时候，要判断哪一个dom是事件源就不是很明确了，使用e.target可以准确地获取事件源，并且在使用的过程中可以比较判断，从而实现我们的代码。举个例子：当做一个拖拽的案例的时候，有多个事件源，但是想要知道鼠标点击的是不是我们想要的事件源的时候（例如：其他区域和事件源进行判断），我们就可以使用e.target，比较获取的事件源的Id,classname，nodename... 白话就是：用

小程序获取event.target父元素上的自定义属性

yanergo的博客

05-25

4067

在做小程序的过程中，遇到了一个问题，在业务逻辑上需要通过在父元素身上绑定一个索引值来控制数据的保存。菜鸟如我，本想着点击后通过event.target获取到被点击元素的父元素，从而获取父元素身上的标签，试了几次之后发现这种办法是行不通的。经过一段时间的对不同办法的尝试之后，想起了事件冒泡，以下是我的解决方案： <view> <view data-index="{{0}}" bind:tap="handleIndex"> <view>子元...

Vue cli中点击子组件模块，改变父组件元素 (antd)

weixin_37778355的博客

07-10

1530

这个需求是在vue cli中有个导航栏，其中包含不同的控件，在操作下面子页面的时候，外层的导航栏要相应的变化，改变其中一个控件；先说父组件里： <children style="display:inline" v-if="IfIcon"> //这个插槽不是必须的把children换成普通的div也可以的，就不需要children这个子组件了 <a-icon :type="IconType" /> </children> 整个这个方法里有两个变量需要变化；

js中的触发事件对象event.srcElement与event.target详解

10-20

使用event.srcElement的父亲节点（parentNode）、第一个子节点（firstChild）、父级元素（parentElement）和子节点集合（children）等属性，可以轻松地进行操作。例如，event.srcElement.parentNode表示当前事件源的...

js中事件委托（事件代理）（传统的，vue , e.target.dataset.index）

虞公子的博客

05-30

997

事件委托的原理事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。事件委托的

使用 Node.contains 判断元素是否为后代元素对 svg 元素无效解决方案

welnee的博客

10-22

665

node.contains 对 svg 无效的解决方案

准确获取事件源的任意父级元素（事件委托）

小丞同学

05-09

2160

事件委托终极奥义！用这种方法可以解决绝大多数由动态创建元素，带来的问题！

js事件委托，解决在父级上绑定事件，子级是复杂层级无法直接通过event.target获取到的问题

九段刀客的博客

10-30

314

【代码】js事件委托，解决在父级上绑定事件，子级是复杂层级无法直接通过event.target获取到的问题。

事件源event.target

weixin_30919919的博客

09-28

107

今天在了解检测浏览器是否能播放不同类型的视频时发现以下代码 <script> function supportType(e,vidType,codType) { myVid=document.createElement('video'); isSupp=myVid.canPlayType(vidType+';codecs="'+codType+'"'); ...

js如何监听元素事件是否被移除_js 监听事件的叠加和移除 -

weixin_39838798的博客

12-19

680

// 匿名函数事件无法移除window.addEventListener("resize",function(){alert(1)})// 监听具名函数事件function myResize(){alert(2)}window.addEventListener("resize",myResize)// 移除事件监听window.removeEventListener("resize",myResi...

JS获取DOM节点

shijie

10-29

1111

1.js获取子节点 2.js获取父节点 3.js获取兄弟节点

Event 对象--target 事件属性

Tarafireworks的博客

08-31

3072

定义和用法 target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。 window.event.srcElement与window.event.target 都是指向触发事件的元素，它是什么就有什么样的属性 srcElement是事件初始化目标html元素对象引用，因为事件通过元素层次冒泡，可以在任意一层进行处理，有了元素的引用，就可以读写改元素的属性。 IE浏览器支持window.event.srcElement ，而firefox支持window.event.t

javascript当中attributes的用法

mark_to_win的专栏

03-24

859

3.attributes例 3.1（getElementsByNameNodeListAttributeIEFF.html）<HTML><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/></HEAD><BODY><DIV ID=...

event.target获取元素xpath

05-10

`event.target` 是获取当前触发事件的元素节点，它并不直接提供获取元素的 XPath 的方法。但是，可以通过 `XPathResult` 对象的 `evaluate()` 方法来获取元素的 XPath。以下是一个示例代码： ```javascript function getXPath(node) { if (node && node.nodeType == Node.ELEMENT_NODE) { var path = getXPath(node.parentNode) + '/' + node.tagName.toLowerCase(); var siblings = node.parentNode.children; for (var i = 0; i < siblings.length; i++) { if (siblings[i] === node) { path += '[' + (i+1) + ']'; break; } } return path; } else { return ''; } } document.addEventListener('click', function(event) { var xpath = getXPath(event.target); console.log(xpath); }); ``` 在这个示例中，我们定义了一个 `getXPath()` 函数，该函数以一个元素节点作为参数，并返回该元素的 XPath。然后，我们在 `click` 事件监听器中调用该函数，并将结果输出到控制台。