开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何防止父对象激活子对象的事件

在前端开发中，防止父对象激活子对象的事件可以通过以下几种方式实现：

事件委托：事件委托是一种常用的前端开发技术，它利用事件冒泡的特性，将事件绑定在父对象上，然后通过判断事件源来确定是否执行相应的操作。这样可以避免子对象触发事件时产生冲突。例如，可以将点击事件绑定在父容器上，然后通过判断点击的目标元素是否为子对象来决定是否执行相应的操作。
停止事件冒泡：在子对象的事件处理函数中，可以使用event.stopPropagation()方法来停止事件冒泡，阻止事件继续向父对象传播。这样可以确保只有子对象触发事件，而不会激活父对象的事件。
利用事件捕获阶段：事件捕获是事件传播的第一个阶段，可以在父对象上使用addEventListener方法绑定事件，并将第三个参数设置为true，表示在事件捕获阶段处理事件。这样可以在事件捕获阶段拦截事件，阻止其继续向下传播到子对象。

以上是防止父对象激活子对象事件的几种常用方法，根据具体的场景和需求选择合适的方式进行处理。

腾讯云相关产品和产品介绍链接地址：

云函数（Serverless）：https://cloud.tencent.com/product/scf
云开发（小程序开发）：https://cloud.tencent.com/product/tcb
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai
物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
区块链（BCBaaS）：https://cloud.tencent.com/product/baas
视频直播（CSS）：https://cloud.tencent.com/product/css
音视频处理（VOD）：https://cloud.tencent.com/product/vod

相关搜索:当激活子对象的onClick时，触发向父对象注册的onKeyUp事件在拖动子对象时防止父对象上的单击事件防止在单击子对象时单击父对象用JPA持久化父对象时如何防止保存子对象？对子对象和父对象的触摸事件进行响应 js 对象的父对象 js对象的父对象将父对象的事件绑定到临时子对象的方法 js如何防止触发父节点事件如何防止对象堆叠？如何创建对象作为画布的父对象如何从子对象中获取父对象如何删除父对象的所有子对象，而不使用Django删除父对象防止在鼠标悬停于子对象时调整父对象大小如何防止用户破坏对象如何获取方法的父对象？js获取当前对象的父对象 JavaScript嵌套对象父对象的引用过滤父对象中的嵌套对象从子对象设置父对象的状态

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

常用开源框架中设计模式使用分析-责任链设计模式

说起来设计模式，大家应该都耳熟能详，下面就带大家看下开源框架框架中是如何应用这些经典设计模式的。

02

Unity背包系统

1.通过UIManager（单例）管理不同的Panel 2.通过BagWindow对背包进行管理提供方法： 1）OnPackOpen此方法刷新背包中的数据。遍历玩家的全部数据，分两种情况进行背包中的物品刷新。第一种：一个Block存在子物体，那么将此子物体直接初始化，初始化将激活子物体，将子物体的图片和数量设置为玩家的物品图片和物品的数量。第二种：一个Block没有子物体，我们将创建一个预制体再初始化此预制体，初始化操作同上 2）ClearBag此方法将背包中的全部有物体的Block的物体进行禁用，来隐藏物体 3.购买物品：我们通过CommodityManager来对物品进行购买控制。为物品添加一个点击事件OnClick。在此方法中我们将为BagWindow所持有的一个类TipsManager（下面讲）进行委托的赋值操作。委托的内容： 1）对购买的输入值进行安全检查。 2）对背包进行个检查，包括背包是否满了、玩家是否还有足够的金币进行购买。其中检查背包是否满了和购买物品是否是可叠加物品我们将在玩家的数据类中进行处理。 3）实际的购买我们是在PlayerData中对玩家的物品数据和玩家的金币进行操作。 4）在我们实际购买后，调用一次刷新背包，我们将看到背包的数据与玩家的数据进行同步。 4.我们通过一个TipsManager来管理交易时出现的对话框，在此类中，我们声明一个委托，此委托声明为Action<int>为一个一个参数int类型无返回值的委托。在我们交易完成点击确认的时候将会调用此委托。

02

Vue 源码解析（三）初始化生命周期流程

可以看到先后执行了 beforeCreate, created, mounted, 为什么没有执行 updated, 是因为我们没有手动触发更新，我们可以尝试着触发手动更新下;

02

基于 iframe 的全新微前端方案

作者：damyxu，腾讯 PCG 前端开发工程师 iframe是一个天然的微前端方案，但受限于跨域的严格限制而无法很好的应用，本文介绍一种基于 iframe 的全新微前端方案，继承iframe的优点，补足 iframe 的缺点，让 iframe 焕发新生。背景前端开发中我们对iframe已经非常熟悉了，那么iframe的作用是什么？可以归纳如下：在一个web应用中可以独立的运行另一个web应用这个概念已经和微前端不谋而合，相对于目前配置复杂、高适配成本的微前端方案来说，采用iframe方案具有

09

小程序子组件传值(triggerEvent)

事件系统是组件间通信的主要方式之一。自定义组件可以触发任意的事件，引用组件的页面可以监听这些事件。关于事件的基本概念和用法，参见事件。

02

万字解析微前端、微前端框架qiankun以及源码

本文将针对微前端框架 qiankun 的源码进行深入解析，在源码讲解之前，我们先来了解一下什么是微前端。

04

从零学习微信小程序（三）—— 自定义组件

小程序支持组件化编程，这一点有点像 React ，可以将页面内的功能模块抽象成自定义组件，就类似于基础组件轮播图等…，这样可以将一个复杂的页面拆分成多个低耦合的模块，有助于代码维护。

02

【Cancer Cell】生物分子凝聚体与肿瘤（完整版）

癌变的特征是多种细胞过程的失调，这些过程一直是详细的遗传学、生物化学和结构学研究的主题，但直到最近，才有证据显示许多这些过程发生在生物分子凝结体的背景下。凝结体是无膜的团体，通常由液液相分离形成，将具有相关功能的蛋白质和RNA分子隔离开来。来自凝结体研究的新见解预示着我们对癌症细胞失调机制的理解将发生深刻的变化。在这里，我们总结生物分子凝结体的关键特征，指出它们已经被暗示（或很可能被暗示）在致癌发生中的作用，描述癌症治疗药物的药动学可能会受到凝结体的极大影响，并讨论一些必须解决的问题，以进一步提高我们对癌症的理解和治疗。

02

vue面试考察知识点全梳理

构建时通过不同的命令执行不同的脚本，去读取不同用处的配置，然后生成适合各种场景的Vue源码。

02

vue面试考察知识点全梳理

构建时通过不同的命令执行不同的脚本，去读取不同用处的配置，然后生成适合各种场景的Vue源码。

02

手把手教你写一个简易的微前端框架

最近看了几个微前端框架的源码（single-spa、qiankun、micro-app），感觉收获良多。所以打算造一个迷你版的轮子，来加深自己对所学知识的了解。

04

vue面试考察知识点全梳理3

构建时通过不同的命令执行不同的脚本，去读取不同用处的配置，然后生成适合各种场景的Vue源码。

03

codereview-s8

之后再efficiencyView方法中调用stopPropagation方法阻止事件冒泡

03

微前端究竟是什么？微前端核心技术揭秘！

导语 | 微前端是将Web应用由单一的单体应用转变为多个小型前端应用聚合为一的一种手段。本文从微前端的基础理论出发，对其核心技术进行阐述，最后结合项目进行简单的应用实践。一、微前端背景（一）什么是微前端微前端提供了一种技术：可以将多个独立的Web应用聚合到一起，提供统一的访问入口。一个微前端应用给用户的感观就是一个完整的应用，但是在技术角度上是由一个个独立的应用组合通过某种方式组合而成的。为了防止概念有点抽象，可以看一个具体的例子：上图是一个微前端的demo，主应用中有导航栏，footer组件以及

02

Vue前端面试2021-018

Vue中的组件是要被重复使用的，如果data只是一个对象，多个复用的组件他们之间的数据就会互相影响，所以data是一个返回独立对象的函数，保障每个被复用的组件的数据都是独立的！

02

Vue源码中的生命周期

理解vdom的前提下，component，element的创建实际上对vnode的实例化。而创建组件的时候会将生命周期混入进去，一起来看下这个生命周期

02

JQuery事件处理

Jquery事件 1、绑定事件示例代码：绑定事件

什么是绑定事件？这是隐藏的内容，点击上面的内容会显示这里的内容。

<script language=”javascript”> //单击显示，再次点击隐藏 /*$(function(){ $(“a”).bind(‘click’,function(){ if($(this).next().is(“:visible”)){ $(this).next().h

05

2023前端vue面试题汇总_2023-02-27

有五种，分别是 State、 Getter、Mutation 、Action、 Module

03

浅析微前端技术

微前端是一种类似于微服务的架构，是一种由独立交付的多个前端应用组成整体的架构风格，将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的应用，而在用户看来仍然是内聚的单个产品。

06

单细胞项目文章登Science|田志刚院士团队发现天然淋巴细胞的骨髓外发育新途径

英文标题：Liver type 1 innate lymphoid cells develop locally via an interferon-g-dependent loop

03

面向对象版tab 栏切换

MDN Web文档：https://developer.mozilla.org 查询insertAdjacentHTML用法

03

30 道 Vue 面试题，内含详细讲解(中)

比如有父组件 Parent 和子组件 Child，如果父组件监听到子组件挂载 mounted 就做一些逻辑处理，可以通过以下写法实现：

03

前端知识点总结vue篇（下）

Vue，Angular，React前端三大框架巨头，重要性不用多说，不过目前项目开发中主要用vue，现总结了一些Vue常用的知识点。

02

vue2.0 配置选项属性方法事件 ——速查

全局配置　　　　　　　　　　　　　　silent 　　　　　　设置日志与警告　　　 optionMergeStrategies 　　　　　　合并策略 devtools 　　　　　　配置是否允许vue-devtools 　　　　　 errorHandler 　　　　　　错误追踪　　　 ignoredElements 　　　　忽略在Vue 之外的自定义元素。

09

Vue学习笔记(二)

单页面应用程序 SPA，指的是一个 Web 网站中只有唯一一个 HTML 页面，所有的功能和交互都在这个唯一的页面内完成。

03

30 道 Vue 面试题，内含详细讲解（涵盖入门到精通，自测 Vue 掌握程度）

本文以前端面试官的角度出发，对 Vue 框架中一些重要的特性、框架的原理以问题的形式进行整理汇总，意在帮助作者及读者自测下 Vue 掌握的程度。本文章节结构以从易到难进行组织，建议读者按章节顺序进行阅读，当然大佬级别的请随意。希望读者读完本文，有一定的启发思考，也能对自己的 Vue 掌握程度有一定的认识，对缺漏之处进行弥补，对 Vue 有更好的掌握。文章最后一题，欢迎同学们积极回答，分享各自的经验 ~~~

03

前端一面常见vue面试题汇总_2023-02-27

eventBus事件总线适用于父子组件、非父子组件等之间的通信，使用步骤如下：（1）创建事件中心管理组件之间的通信

02

前端一面高频vue面试题总结

Vue SSR需要做的事多点（输出完整 HTML），除了complier -> vnode，还需如数据获取填充至 HTML、客户端混合（hydration）、缓存等等。相比于其他模板引擎（ejs, jade 等），最终要实现的目的是一样的，性能上可能要差点

02

BuildAdmin09：tab的关闭，让滑动块何去何从

之前的两篇文章，一篇实现了tab页的新增，一个讲了如何实现滑动块，本篇就来讲一下如何实现tab的关闭，以及tab关闭时滑动块的变换情况。

00

面向对象版tab 栏切换

4.以前的做法:动态创建元素createElement , 但是元素里面内容较多,需要innerHTML赋值在appendChild 追加到父元素里面.

03

30 道 Vue 面试题，内含详细讲解(上)

本文以前端面试官的角度出发，对 Vue 框架中一些重要的特性、框架的原理以问题的形式进行整理汇总，意在帮助作者及读者自测下 Vue 掌握的程度。

03

VueJS 基础知识

原理：<input type="text" :value="datax" @input="datax = $event.target.value">

01

一篇文章学会统一建模语言UML

学习 UML 的目的是帮助我进行需求分析，CRUD 谁都会写，那是建立在数据库和业务需求都明确的基础之上的，所以这些基本功还是要掌握的。

01

前端常考vue面试题（必备）_2023-03-15

computed 内部实现了一个惰性的 watcher,也就是 computed watcher,computed watcher 不会立刻求值,同时持有一个 dep 实例。

02

js通过contentWindow控制iframe子页面元素点击事件,并把值传给父页面[通俗易懂]

本来需要点击一个图片后,显示一个iframe上传框.点击上传,从而操作子页面中的点击上传动作,再把值传给父页面.或控制父页面中iframe元素的显示状态.不过.通过upload()函数,可以不用显示上传框了,直接激活子页面中的上传动作.另外,onchange事件则可以自动提交上传,不必用户点击上传按钮了.三步并做一步

03

如何构建运行良好的Vue组件

作者：Kevin Ball 译者：前端小智来源：vuejsdevelopers 很少有人最初编写Vue组件时打算将其开源。我们大多数人都是从自己编写组件开始的——我们有一个问题，然后决定通过构建一个

02

前端vue面试题2021_vue框架面试题

面试官您好!我叫XXX,来自XXX,很荣幸能来我们公司面试,我从事前端开发有3年了,目前掌握的技术有html,css,js,ajax,vue,小程序,参与过各种类型的项目。我做过的项目有 A,B,C,D,E 那么最近做的一个项目是XXX 在这个项目中我主要负责的板块是XXX 面试官您这边还有什么想要了解的么。

04

Qt Designer中的QWidget属性表介绍

2、disambiguation消除歧义（澄清）：这是当有多个需要翻译文字的对象有相同文字时，避免出现歧义而额外添加的消除歧义字符，缺省为空，一般歧义字符设置为其所在对象对应类的名字，此消歧参数是为转换器指定注释的首选方法。

02

Web如何适配无障碍？

ARIA (Accessible Rich Internet Applications) 是一组属性，用于定义使残障人士更容易访问 Web 内容和 Web 应用程序（尤其是使用 JavaScript 开发的应用程序）的方法。

06

一面高频vue面试题

eventBus事件总线适用于父子组件、非父子组件等之间的通信，使用步骤如下：（1）创建事件中心管理组件之间的通信

04

Vue父子组件之间的传值及父子组件之间相互调用属性或方法

父组件向子组件传值是通过属性的方式传值，传的值可以是任意类型，甚至可以是父组件的方法或者父组件对象本身。为方便理解可以简单将父组件向子组件传值按以下步骤实现。

05

OpenAI炼丹秘籍：教你学会训练大型神经网络

来源：新智元本文约3000字，建议阅读5分钟本文详细介绍了一些训练大型神经网络的相关技术及底层原理。想知道那些超大规模神经网络都是怎么训出来的？OpenAI一篇文章总结：除了显卡要多，算法也很重要！如今AI的很多进步都要归功于大型神经网络，尤其是大公司和研究机构提供的预训练模型更是推动了下游任务的进步。但想自己动手训练一个大型神经网络并不简单，首先要面对的就是海量的数据、多机协调和大量GPU的调度工作。一提到「并行」，冥冥之中就会感觉多了很多隐藏的bug。最近OpenAI发布了

02

JavaScript—事件

当我们的鼠标点击到窗口上的按钮时，并不是鼠标的箭头真正点击到这个按钮了，而是鼠标发出了一个动作事件，然后这个事件先被传送到了操作系统的命令处理带，然后再传送到负责显示图形的图像数据层，事件到这里后图像数据层会先看哪个程序的窗口在最上面(因为不是在最上面就没必要看了)，再根据鼠标提供的X Y坐标确认点击的是哪个窗口上的按钮，接着再确认这个窗口是哪个程序。

02

Vue之组件化（三）

每个组件的数据都存放在自己的data函数中，不可以直接使用其他组件或Vue实例（根组件）中的data数据。在开发时，页面中展示的数据都是通过网络请求获取而来的动态数据。因为每个组件都是独立存在，即每个组件中的数据都是独立存储的，那每个组件所需要的动态数据都是通过各自发送网络请求而获取来的吗？由于组件化的思想，一个完整的页面可以根据功能划分成若干个组件，而这些组件也可以根据逻辑功能再次细分。所以一个页面是由许多个组件集成的。

02

Vue父子组件生命周期执行顺序及钩子函数的个人理解（转载）

先附一张官网上的vue实例的生命周期图，每个Vue实例在被创建的时候都需要经过一系列的初始化过程，例如需要设置数据监听，编译模板，将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数(回调函数)，这给了用户在不同阶段添加自己代码的机会。

03

python实现微信小游戏“飞机大战”

以前版本的微信小游戏有一个飞机大战的游戏，学完python之后我试着写了下程序去基本实现这个游戏的部分功能，下面是小游戏飞机大战的python代码

02

金九银十，为期2周的前端面经汇总（初级前端）

伪元素和伪类的根据区别就是：前者是创建出了一个新元素，而后者是一个已存在但你不能直接看到的元素。

02

我们是怎么在项目中落地qiankun的

由于业务增长，团队拆分，我们需要将原有系统的一部分模块（Vue实现）迁移到另外一个系统（React）中。但两个系统技术栈不同，导致重构成本变大，但业务又希望在短期内看到效果，后面可以增量的重构。

02

mouseenter与mouseover为何这般纠缠不清？

本文作者：IMWeb 谦龙原文出处：IMWeb社区未经同意，禁止转载前言原文地址项目地址不知道大家在面试或者工作过程中有没有被mouseover和mouseenter(对应的是mouseout和mouseleave)事件所困扰。自己之前在面试的时候就有被问到诸如mouseover和mouseenter事件的异同之类的问题？当时没有答出来，一直也对这两个事件有点模糊不清，趁着最近正在读zepto源码，准备写一篇这方面的文章，如果有错误，请大家指正。 m

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭