首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何仅在父div中触发函数,而不在子div中触发

要实现在父div中触发函数,而不在子div中触发,可以使用事件委托的方式来处理。

事件委托是利用事件冒泡的特性,将事件绑定在父元素上,通过事件冒泡的传播机制,当子元素触发事件时,事件会一直向上冒泡到父元素,从而触发绑定在父元素上的事件处理函数。

具体实现步骤如下:

  1. 给父div绑定事件处理函数,可以使用addEventListener方法来绑定事件,例如:
代码语言:txt
复制
const parentDiv = document.getElementById('parentDiv');
parentDiv.addEventListener('click', parentClickHandler);
  1. 在父div的事件处理函数中,判断事件的目标元素是否为子div,如果是则不执行后续逻辑,如果不是则执行后续逻辑。可以使用event.target属性来获取事件的目标元素,例如:
代码语言:txt
复制
function parentClickHandler(event) {
  if (event.target === parentDiv) {
    // 在父div中触发函数的逻辑
  }
}

这样就可以实现在父div中触发函数,而不在子div中触发。注意,子div中的事件不会被阻止,仍然可以正常触发。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 云函数(Serverless):https://cloud.tencent.com/product/scf
  • 云服务器(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
  • 移动开发(移动推送、移动分析):https://cloud.tencent.com/product/mps
  • 区块链(BCS):https://cloud.tencent.com/product/bcs
  • 元宇宙(Tencent XR):https://cloud.tencent.com/product/xr
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 【建议收藏】面试官贼喜欢问的 32+ vue 修饰符,你掌握几种啦?

    文章例子都放在了github源码上,也可以点击直接看例子 如何动态注册路由? 文中的每个修饰符例子都由一个页面承载,聪明的你肯定不想手动引入几十个.vue文件并配置路由....不过更加推荐修饰符的做法,这样你的函数会更加专注在逻辑处理上,不用关心DOM事件细节 export default { name: 'stop', methods: { onClickChild...首先可以明确的是点击上面和下面的节点都不会触发节点的点击事件 点击下面的节点会打印出我是节点,但是不会跳转掘金 点击上面的节点会打印出我是节点,也不会跳转掘金 但是点击上面的节点,节点会不会跳转至掘金呢...a@click.prevent.self="onClickParent" 不管是节点还是自身点击,都是先阻止默认事件,只有当触发点击事件是a元素本身时才会执行onClickParent回调函数。...ctrl按键时才触发鼠标或键盘事件的监听器,详细例子请看上面 18 .alt 仅在按下alt按键时才触发鼠标或键盘事件的监听器,详细例子请看上面 19 .shift 仅在按下shift按键时才触发鼠标或键盘事件的监听器

    2.7K10

    简述鼠标事件onmouseover、onmouseout 与 onmouseenter、onmouseleave 的区别

    ()"> 鼠标移入我 或者移入我的元素 function handleMouseOver() { console.log...onmouseleave 当鼠标指针从元素移动出来时,会触发 onmouseleave 事件。与前两者不同,这两种事件仅在鼠标指针直接经过元素时触发不会在鼠标指针经过元素的元素时触发。..."handleMouseLeave()"> 鼠标移入我 但不要移入我的元素 function handleMouseEnter...这意味着当你使用这些事件时,它们只会在指定的元素上触发不会影响到其他元素。特别是 onmouseleave,它不会在元素上触发,也不会冒泡到元素。...onmouseenter 和 onmouseleave 仅在鼠标指针直接移动到元素上时触发,且不支持事件冒泡,这使得它们在某些情况下比 onmouseover 和 onmouseout 更可靠,特别是在需要精确控制事件触发的场景

    1K11

    ReactPortals传送门

    定位是无法做到完全脱离组件的,即使我们能够达到脱离文档流的效果,也会因为组件的样式受到影响,特别是在组件库,我们作为第三方组件库的话是完全没有办法控制用户设计的DOM结构的,如果仅仅采用脱离文档流的方法不实际将...MouseEnter: 当鼠标光标进入一个元素时触发,该事件仅在鼠标从元素的外部进入时触发,不会对元素内部的元素产生影响。...MouseLeave:当鼠标光标离开一个元素时触发,该事件仅在鼠标从元素内部离开时触发,不会对元素外部的元素产生影响。...避免重复触发: MouseOver和MouseOut事件在鼠标悬停在元素内部时会重复触发,当鼠标从一个元素移动到其元素时,MouseOut事件会在元素触发一次,然后在元素触发一次,MouseOut...事件也是同样会多次触发,可以将元素与所有元素都看作独立区域,事件会冒泡到元素来执行事件绑定函数,这可能导致重复的事件处理和不必要的逻辑触发MouseEnter和MouseLeave事件不会重复触发

    25050

    React Hooks随记

    Hook规则 只在最顶层使用Hook,不在条件、循环或者嵌套函数中使用Hook 只在React函数式组件或自定义Hook中使用Hook 为什么Hook高度依赖执行顺序?...性能优化点在于: 调用setState,就会触发组件的重新渲染,不论state是否变化 组件更新,组件也会更新 基于以上两点,useCallback和useMemo就是解决性能问题的杀手锏。...val变化时,set.size无变化,说明返回的是缓存的函数。 知道useCallback特点后,有什么作用呢? 使用场景:有一个组件,包含组件,组件接收一个函数作为peops。...通常而言,如果组件更新了,组件也会执行。但大多数情况下,更新是没有必要的。...我们可以借助useCallback来返回函数,然后把这个函数作为props传递给组件;这样,组件就能避免不必要的更新。

    91120

    jquery 绑定事件 - mouseover() mouseout() mouseenter() mouseleave() hover()

    事件函数列表 blur() 元素失去焦点 focus() 元素获得焦点 click() 鼠标单击 mouseover() 鼠标进入(进入元素也触发) mouseout() 鼠标离开(离开元素也触发)...mouseenter() 鼠标进入(进入元素不触发) mouseleave() 鼠标离开(离开元素不触发) hover() 同时为mouseenter和mouseleave事件指定处理函数 ready...这样就像是类似事件冒泡,不过是元素将mouseover()传递冒泡给元素,就算子元素没在#big里面,也会触发这个事件。...当元素在元素内部的时候,mouseenter()就只会触发一次而已。也就是刚刚进入元素#big div的时候触发,再进入#small div的时候就不会触发了。...当两个元素嵌套在一起的时候,只有元素触发了事件。 下面来看看不在一起的时候。 ? ? 可以看到,#small div会将事件冒泡给#big div,导致触发mouseleave()事件。

    2.9K30

    懂个锤子Vue 自定义指定、插槽:

    ;bind: 指令第一次绑定到元素时触发inserted: 元素被插入到节点时触发update: 组件内的数据变化导致VNode更新时触发componentUpdated: 组件及组件更新完成后触发...unbind: 指令从元素上解除绑定时触发定义对象:内置生命钩子函数参数:el: 指令所绑定的DOM元素,这使得你可以在指令的逻辑中直接操作DOM,比如:添加样式、修改属性或触发事件;binding:...console.log(el); el.focus() }})局部自定义指令:局部注册: 是Vue.js中一种:更加模块化和灵活的方式,为特定组件添加定制的DOM行为;与全局注册不同: 局部指令仅在定义它的组件及其组件可用...,当然这也可以通过:父子传参解决插槽Slot:插槽Slot: 是一种内容分发机制:使得组件可以将特定的HTML内容插入到组件的特定位置,这使得组件的结构更加灵活,能够适应不同的内容需求,不需要修改组件的内部实现...,并支持根据需求自定义:修改\删除\查询操作按钮权限;组件操作表格信息,就要获取对应信息的ID: 组件—通过插槽形式—传递组件.

    12010

    第四篇:数据是如何在 React 组件之间流动的?(上)

    比如在-组件这种嵌套关系,只能由组件传 props 给组件,不能反过来。 听上去虽然限制重重,但用起来却是相当的灵活。...点击更新组件的文本 ); } } 在组件,我们只需要在 changeText 函数上开一个传参的口子,作为数据通信的入口,...问题一:事件和监听函数的对应关系如何处理? 提到“对应关系”,应该联想到的是“映射”。在 JavaScript ,处理“映射”我们大部分情况下都是用对象来做的。...问题二:如何实现订阅? 所谓“订阅”,也就是注册事件监听函数的过程。...发布的本质是触发安装在某个事件上的监听函数,我们需要做的就是找到这个事件对应的监听函数队列,将队列的 handler 依次执行出队: // 别忘了我们前面说过触发时是可以携带数据的,params 就是数据的载体

    1.5K21

    为什么说 Vue 的响应式更新精确到组件级别?(原理深度解析)

    (划重点,这也是本文所说的更新粒度的关键) props的更新如何触发重渲染?...其实,msg 在传给组件的时候,会被保存在组件实例的 _props 上,并且被定义成了响应式属性,组件的模板对于 msg 的访问其实是被代理到 _props.msg 上去的,所以自然也能精确的收集到依赖...() } } 而在组件更新的过程触发组件的响应式更新,导致触发了 queueWatcher 的话,由于 isFlushing 是 true,会这样走 else 的逻辑,由于组件的 id...是大于组件的 id 的,所以会在插入在组件的 watcher 之后,组件的更新函数执行完毕后,自然就会执行组件的 watcher 了。...,在组件的上下文中执行,所以组件不会再收集到它内部的依赖,如果组件没有用到 msg,更新只会影响到组件本身。

    31310

    Vue与React的异同-组件(二)

    props是可以动态变化的,组件也实时更新,在react官方建议props要像纯函数那样,输入输出一致对应,而且不太建议通过props来更改视图 组件一般要显示地调用props选项来声明它期待获得的数据...而在react不必需,另两者都有props校验机制 每个Vue实例都实现了事件接口,方便父子组件通信,小型项目中不需要引入状态管理机制,react必需自己实现 使用插槽分发内容,使得可以混合组件的内容与组件自己的模板...$emit(eventName) 触发事件 // 组件模版 {{ total }} <button-counter...callback的prop形式,然后在组件触发此回调 //组件 class Child extends Component { handle (e) { //回调函数传递参数给组件...这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,不必再次执行函数方法在重新渲染时将总会执行。

    1.3K20

    vue入门基础教程之经验总结篇(小白入门必备)|建议收藏「建议收藏」

    $emit(‘on-click’, event); 在组件可以通过$emit触发自定义事件on-click,在组件通过@on-click来监听组件之间的通信方式 组件向组件的通信方式可以通过props...oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子可用 自定义指令 provide 和 inject...与公共组件的区别 组件:在组件引入组件,相当于在组件给出一片独立的空间供组件使用,然后根据props来传值,但本质上两者是相对独立的。...备用内容在组件的作用域内编译,并且仅在容纳元素为空,且没有要插入的内容时才显示备用内容。... 渲染结果: 我是组件的标题 我是组件的标题

    3.8K20

    vue组件通信方式有哪些?1

    vue组件通信方式一、props(传值----自定义属性) / $emit(传值----- 自定义事件)组件通过props的方式向组件传递数据,通过$emit 组件可以向组件通信。...组件向组件传值(props)下面通过一个例子说明组件如何组件传递数据:在组件article.vue如何获取组件section.vue的数据articles:['红楼梦', '西游记',...$emit('onEmitIndex', index) } }}另外:props同样可以使组件向组件传值:组件::在组件标签上绑定自定义属性 这个属性的值是组件的一个函数...--------props:['value']-----接收组件传入的函数 this.value(要传入组件的值)------调用这个函数 把要传递的值作为形参组件3.----...注意: 这里不论组件嵌套有多深, 只要调用了inject 那么就可以注入provide的数据,不局限于只能从当前组件的props属性回去数据举例验证接下来就用一个例子来验证上面的描述: 假设有三个组件

    1.6K30

    vue组件通信方式有哪些?

    vue组件通信方式一、props(传值----自定义属性) / $emit(传值----- 自定义事件)组件通过props的方式向组件传递数据,通过$emit 组件可以向组件通信。...组件向组件传值(props)下面通过一个例子说明组件如何组件传递数据:在组件article.vue如何获取组件section.vue的数据articles:['红楼梦', '西游记',...$emit('onEmitIndex', index) } }}另外:props同样可以使组件向组件传值:组件::在组件标签上绑定自定义属性 这个属性的值是组件的一个函数...--------props:['value']-----接收组件传入的函数 this.value(要传入组件的值)------调用这个函数 把要传递的值作为形参组件3.----...注意: 这里不论组件嵌套有多深, 只要调用了inject 那么就可以注入provide的数据,不局限于只能从当前组件的props属性回去数据举例验证接下来就用一个例子来验证上面的描述: 假设有三个组件

    1.9K10

    第二篇:为什么 React 16 要更改组件的生命周期?(上)

    “躯干”未必总是会做具体的事情(比如说我们可以选择性地省略对 render 之外的任何生命周期方法内容的编写),“灵魂”却总是充实的(render 函数却坚决不能省略);倘若“躯干”做了点什么,往往都会直接或间接地影响到...在挂载阶段,一个 React 组件会按照顺序经历如下图所示的生命周期: 首先我们来看 constructor 方法,该方法仅仅在挂载的时候被调用一次,我们可以在该方法对 this.state 进行初始化...写到这里,就不得不在“变化”这个动作上深挖一下了。...面对这样的运行结果,我不由得要带你复习一下 React 官方文档的这句话: componentReceiveProps 并不是由 props 的变化触发的,而是由组件的更新触发的,这个结论,请你谨记...若我们点击上一个 Demo 的“修改组件文本内容”这个按钮: 这个动作将会触发组件 LifeCycle 自身的更新流程,随之被触发的生命周期函数如下图增加的 console 内容所示: 先来说说

    1.2K10

    Vue自定义组件如何使用v-model

    , // a、用props接收value传递过来的参数, // b、用内部数据接收value // c、新建oninput方法,更改currentvalue, // 让组件函数触发组件函数,并传值...,数据的流向是,组件将msg传递个自组件,自组件拷贝了一个副本,修改副本后通过触发组件绑定的函数,从而达到数据双向绑定的原理。...,第一种方案组件额外定义了一个changemsg的函数第二种方案却没有,第二种方案只需要监听自组件内部事件,在相应的地方触发input事件即可,更改数据的事情vue会自动更新。...对于一个带有 v-model 的组件原理大概有以下几点: 1、首先带有v-model的组件通过绑定的value值(即v-model的绑定值)传给组件 2、然后组件通过 prop接收一个 value...; 3、最后组件利用 $emit 触发 input 事件,并传入新值value给组件; 4、vue会自动实现数据更新。

    3.3K52
    领券