子元素事件触发时不执行父元素的对应事件

最新推荐文章于 2024-08-17 02:04:46 发布

iteye_14438

最新推荐文章于 2024-08-17 02:04:46 发布

阅读量577

点赞数

分类专栏： JS 文章标签： javascript ViewUI

JS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种在JavaScript中阻止事件冒泡的方法，通过在子元素的点击事件处理函数中使用event.stopPropagation()，可以避免触发父元素上的绑定事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果父元素和子元素同时绑定了同样类型的事件（如click），

点击子元素时，如果不想触发父元素的绑定事件，需要在子元素的时间函数里加入以下语句

e.stopPropagation();

参考代码

$("[name='chk']").click(function(event) {
    event.stopPropagation();
    //省略
    return true;
})

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

iteye_14438

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

点击子元素事件不触发父元素事件

05-12

点击子元素，触发子元素事件的同时不触发父元素的时间

element.ui 中el-input获取焦点事件不触发父元素事件

qq_42594589的博客

04-29

1087

把获取焦点事件改成点击事件即可 <input @click.stop.native="">

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

子元素不触发父元素点击事件的方法

adingyb的博客

06-26

1万+

加入event.stopPropagation();用法在这里：http://www.runoob.com/jquery/event-stoppropagation.html阻止 click 事件冒泡到父元素，如：function del(id) { event.stopPropagation();//阻止触发父元素的点击事件 var flag = window.confirm("您确定要...

jquery子元素不触发父元素点击事件

weixin_28686771的博客

08-17

337

jQuery 实现子元素不触发父元素点击事件在前端开发中，遇到子元素点击事件意外触发父元素点击事件的情况并不罕见。这可能会导致逻辑混乱，尤其是在复杂的页面结构中。本篇文章将引导你逐步实现“子元素不触发父元素点击事件”，通过详细的步骤讲解、代码示例以及流程表格，帮助你轻松掌握这一技术。整体流程我们可以将实现这一功能的流...

mouseenter和mouseleave与mouseover和mouseout的区别

热门推荐

xm_w_xm的博客

04-19

2万+

一、mouseenter（指针穿过，子集不执行）当鼠标指针穿过（进入）被选元素时，会发生 mouseenter 事件。 mouseenter() 方法触发 mouseenter 事件，或添加当发生 mouseenter 事件时运行的函数。注意：与mouseover事件不同，mouseenter 事件只有在鼠标指针进入被选元素时被触发，mouseover 事件在鼠标指针进入任意子元素时...

CSS：响应子元素的鼠标事件，屏蔽父元素的鼠标事件

smm的博客

04-21

1706

使用CSS屏蔽父元素的鼠标事件，但响应子元素的鼠标事件

vue父组件自动执行子组件事件

星辰大海

12-28

1577

父组件 <child ref="childRef"></child> mounted(){ this.$ref.childRef.childEvent(); } 使用created() 失效子组件 methods: { childEvent(){ // xxxx } }

js 阻止子元素继承父元素事件

qq_24612753的博客

11-11

1825

实现例子： vardivBtn = document.getElementById("xx"); // xx表示父元素的id divBtn.onclick = function(e){ if(e.target != this) { return; } else{ } } 上述例子为什么能实现子元素...

Vue父组件方法和子组件方法执行优先顺序

hikktn的博客

12-27

6152

vue父组件调用子组件方法时，当方法中用到父组件传入的数据，在调用方法之前修改数据，调用子组件方法时数据还是原来的数据，下一次调用时才会变成上一次修改的数据。

react 阻止事件冒泡

山外小楼

03-02

1522

当我们在一个div 父级盒子有点击事件，子级也有点击事件时，不想点击子级事件触发父级事件就需要做阻止冒泡处理。 import React, { useState} from 'react' function Model(){ const clickShowModel=(event,props)=>{ event.stopPropagation(); } ...

点击子元素时不触发父元素的点击事件，阻止事件向父层冒泡

多么不容易的博客

08-09

6582

//子元素点击事件 document.getElementById("anyel").addEventListener("click",function(e){ //屏蔽父层点击事件 e.stopPropagation(); //子层点击事件的业务... ... }); 小卜，不要抄我代码！ ...

CSS基础（复合选择器-三大特性）

qq_53926719的博客

03-07

560

CSS基础 Emmet语法快速生成HTML 如果想快速生成多个标签，直接*n。 div*3???? <div></div> <div></div> <div></div> 如果有父子级关系的标签，用> ul>li???? <ul> <li></li> </ul> 兄弟级，用+ div+p???? <div></div> <p

父元素的事件不影响子元素

weixin_45093753的博客

09-05

1755

父元素的事件不影响子元素

js关于子元素不触发父元素事件的若干方法

weixin_34209851的博客

02-07

1796

2019独角兽企业重金招聘Python工程师标准>>> ...

阻止子元素继承父元素事件

风火一回，一生不毁

06-15

1万+

DOM事件标准定义了两种事件流，分别是捕获和冒泡。默认情况下，事件使用冒泡事件流，不使用捕获事件流。然而，在Firefox和Safari里，你可以显式的指定使用捕获事件流，方法是在注册事件时传入useCapture参数，将这个参数设为true。冒泡事件流当事件在某一DOM元素被触发时，例如用户在客户名字节点上点击鼠标，事件将跟随着该节点继承自的各个父节点冒泡穿过整个的D

WPF 忽略子控件事件触发父控件事件

z18228597698的博客

02-01

3042

IsHitTestVisible="False" 获取或设置此 UIElement 的包含区域是否可为命中测试命中测试，则为 true；否则为 false。默认值为 true。

Html 子元素不触发父元素事件

开心的去学习->研究

02-04

284

子元素事件中增加 event 如: 子元素事件中增加 ev.stopPropagation(); 如:function abc(ev,id){ev.stopPropagation();} this也可以(代替event)

父元素与子元素的点击事件影响问题

人生不止眼前的电脑！

06-15

1万+

例如以下的代码： html：<div class="elementI" style="height: 100px;width: 100px;border: 1px solid red;"> 父元素 <div class="elementII" style="height: 50px;width: 50px;border: 1px solid black;">子元素</div> </

formmaking 子表单+ 在setData时无法触发子元素change方法

最新发布

08-09

<think>我们正在处理的问题：在使用formmaking的子表单功能时，调用setData方法无法触发子元素的change事件，需要找到解决方案。根据引用资料，我们可以看到在微信小程序中，表单元素通常通过`bindinput`或`bindchange`等事件来监听值的变化。但是，当我们使用`setData`方法直接设置数据时，并不会触发这些事件，因为事件是由用户交互触发的。针对子表单（可能是一个数组结构），我们通过`setData`更新整个子表单数组或其中某个元素的值时，子元素（比如输入框）绑定的`bindchange`事件不会被触发。解决方案思路： 1. 在调用`setData`更新子表单数据后，手动触发子元素的change事件。 2. 或者，避免直接使用`setData`设置子表单中元素的值，而是通过用户交互（如输入）来触发，但这在需要编程设置值时不可行。 3. 另一种方法是，在子表单组件的设计上，使用一个中间变量或观察数据变化，然后手动调用事件处理函数。然而，在formmaking（一个基于微信小程序的表单设计器）的上下文中，我们需要考虑其特定的实现方式。根据引用[5]中的代码片段，我们可以看到表单元素绑定了`bindinput`事件（`onchange`方法）： `<input ... bindinput="onchange">` 因此，我们可以在使用`setData`设置值后，手动调用这个`onchange`方法，模拟事件触发。具体步骤：假设我们有一个子表单数组`subForm`，其中每个元素是一个对象，包含字段如`field1`、`field2`等。我们通过`setData`更新了某个子表单项的值，然后需要触发该表单项的change事件。但是，由于子表单可能由多个输入项组成，并且是动态生成的，我们需要知道是哪个子项被更新。我们可以这样做： 1. 在更新数据后，获取该子项对应的组件实例（或通过选择器获取节点），然后触发事件。但微信小程序中直接操作节点比较麻烦，且不推荐。 2. 另一种方法是，在子表单的每个子项中，将事件处理函数作为子项的一个方法，然后我们在设置数据后，直接调用这个函数。然而，在formmaking中，子表单的结构可能是封装好的，我们可能无法直接修改每个子项的内部逻辑。因此，我们可以考虑以下方案：方案一：在设置数据后，手动触发自定义事件我们可以利用微信小程序的`triggerEvent`方法，在子组件内部触发一个事件，但前提是子组件已经封装了相应的事件。方案二：修改子组件的观察器（observers）如果子组件中使用了observers来监听数据变化，那么当通过`setData`更新时，observers会被触发，我们可以在observers中执行change事件需要做的操作。但是，由于我们使用的是formmaking，它可能没有暴露这样的接口。方案三：在父组件中维护一个标志，当使用`setData`设置子表单数据时，同时设置一个标志位，然后在子组件的`updated`生命周期（或类似）中检查这个标志位，并执行change事件的处理函数。但这需要修改子组件的代码。考虑到formmaking是一个可配置的表单生成器，我们可能无法直接修改其内部组件。因此，我们需要寻找formmaking是否提供了相关的方法或事件。实际上，formmaking可能已经提供了表单验证和值变化的事件，我们可以利用其提供的API。如果没有，我们可以尝试以下方法： 1. 在子表单的每个输入组件上，添加一个id（或data-id），以便我们可以通过选择器获取到该组件。 2. 使用`setData`更新数据后，用`wx.createSelectorQuery`获取该组件的节点，然后调用组件的`onchange`方法（如果该方法在组件中定义）。但这种方法侵入性较强，且依赖于组件内部实现。另一种思路：避免使用`setData`直接设置子表单中元素的值，而是通过用户输入的方式。但是，如果值是从其他逻辑计算得到的，则无法通过用户输入。因此，我们可能需要修改子组件的定义，使其在值被外部设置时能够触发change事件。具体实现（如果能够修改子组件）：在子组件的js中，使用observers监听数据变化： ```javascript Component({ properties: { value: String // 假设子组件有一个value属性 }, observers: { 'value': function(newVal) { // 当外部通过setData设置value时，这里会触发 // 然后我们手动触发change事件 this.triggerEvent('change', { value: newVal }); } } }); ``` 这样，当父组件通过`setData`设置子组件的value时，子组件会触发一个change事件，父组件可以捕获这个事件并执行相应的处理。但是，formmaking生成的子表单组件可能已经使用了observers，或者没有暴露这样的接口。如果无法修改子组件，那么可能需要联系formmaking的开发者，或者查看其文档是否有相关支持。考虑到实际情况，我们可能只能采用一种变通方法：在设置数据后，手动调用表单提交或验证函数，以更新整个表单的状态，而不是逐个触发子元素的change事件。总结：由于直接设置数据不会触发输入事件，我们可以： 1. 修改子组件，使其在值被设置时触发change事件（通过observers）。 2. 如果无法修改，则在设置数据后，手动更新父组件中存储的表单数据，并执行整个表单的验证或更新逻辑，而不依赖于每个子元素的change事件。在formmaking中，可能已经提供了整体表单的验证和值获取方法，所以我们可以忽略单个子元素的change事件，而是通过整体表单的提交或验证来获取最新的值。因此，解决方案可以是：在调用`setData`设置子表单数据后，直接调用formmaking的验证方法或提交方法，这样就会使用最新的数据。根据引用[1]中，我们有一个`serialize`函数可以获取表单数据，所以我们可以手动调用这个函数来获取更新后的值。但是，这并不能解决子元素change事件可能带来的副作用（比如实时校验、实时保存等）。所以，如果子元素的change事件有重要的副作用，我们必须在设置数据后手动触发这些副作用。具体到代码，我们可以在设置数据后，模拟一个事件对象，然后调用子元素绑定的change事件处理函数。例如，假设子表单中每个输入项都绑定了`onchange`方法，我们可以： ```javascript // 假设我们更新了子表单中第index项的子元素fieldName的值为newValue // 首先，我们通过setData更新数据 this.setData({ [`subForm[${index}].fieldName`]: newValue }); // 然后，手动触发该子元素的change事件 // 我们需要知道该子元素的事件处理函数，假设它叫onSubFormItemChange // 并且我们需要构造一个事件对象 const e = { currentTarget: { dataset: { field: 'fieldName', index: index } // 这里根据实际dataset设置 }, detail: { value: newValue } }; this.onSubFormItemChange(e); ``` 但是，这种方法要求我们知道每个子元素的事件处理函数，并且它必须是一个公共方法。在formmaking中，子表单的子元素事件处理函数可能是动态生成的，并且可能依赖于组件的结构。因此，如果formmaking没有提供这样的机制，我们可能需要根据其内部实现来调整。鉴于问题描述中没有具体的代码，我们给出一个通用的建议： 1. 如果formmaking支持自定义事件处理，那么可以在生成子表单时，为每个子元素绑定一个自定义的事件处理函数，该函数可以接收事件对象，并在其中调用一个公共方法，这样我们就可以在需要时模拟事件。 2. 或者，在子组件中，我们可以通过ref来引用子组件实例，然后直接调用子组件的事件处理函数（微信小程序基础库2.7.1以上支持使用selectComponent获取组件实例）。例如，在父组件中： ```javascript // 给子表单的每个子项添加一个id或class，然后通过selectComponent获取 const childComponent = this.selectComponent('#child-item-' + index); if (childComponent) { // 调用子组件的方法，比如子组件有一个onChange方法 childComponent.onChange(newValue); // 注意，这里需要子组件暴露这个方法 } ``` 但是，这需要子组件支持。综上所述，最可行的方案是修改子组件的代码，使用observers来监听值的变化并触发事件。如果无法修改，则尝试在设置数据后，通过ref获取子组件实例并调用其事件处理方法。如果都不行，则可能需要重新考虑设计，避免在子表单中使用需要触发change事件的场景，或者使用其他方式更新数据（如通过用户输入）。由于问题具体实现细节未知，这里提供几个可能的解决方案供参考。相关问题： 1. 在微信小程序中，如何手动触发表单元素的change事件？ 2. formmaking子表单的数据绑定原理是什么？ 3. 微信小程序中，如何使用observers监听数据变化并触发事件？ 4. 如何通过微信小程序的selectComponent方法获取子组件实例？ 5. 在formmaking中，如何实现子表单的实时校验？</think>### 问题分析在 FormMaking 子表单中使用 `setData` 更新数据时，子元素的 `change` 事件未被触发，核心原因是 **`setData` 仅更新数据层，不会自动触发视图层的事件监听器**（如 `bindchange`）。需通过手动触发或数据监听机制解决。 --- ### 解决方案 #### ✅ 方案 1：手动触发事件（推荐）在 `setData` 更新数据后，**手动调用子元素的 change 处理函数**，模拟用户交互： ```javascript // 更新子表单数据 this.setData({ 'subForm[0].fieldName': 'newValue' }); // 手动触发 change 事件 const event = { currentTarget: { dataset: { field: 'fieldName' } }, detail: { value: 'newValue' } }; this.handleSubFormChange(event); // 调用子元素的事件处理函数 ``` #### ✅ 方案 2：通过 Observer 监听数据变化使用微信小程序的 **`observers`** 监听子表单字段变化，替代 `bindchange`： ```javascript Component({ properties: { subForm: Array }, observers: { 'subForm[0].fieldName': function(newVal) { console.log('字段变化:', newVal); // 执行原 change 事件逻辑 } } }); ``` #### ✅ 方案 3：使用自定义事件传递修改子表单组件，在数据更新时主动触发自定义事件： ```javascript // 子组件中 Component({ properties: { value: String }, observers: { value: function(newVal) { this.triggerEvent('customchange', { value: newVal }); // 触发事件 } } }); // 父组件中 <child-component value="{{subForm[0].fieldName}}" bind:customchange="onCustomChange" /> ``` --- ### 关键原因说明 1. **`setData` 的局限性** 直接修改数据不会触发视图层事件（如 `bindchange`），需手动干预[^1][^3]。 2. **子表单组件隔离** 子元素可能未暴露数据监听接口，需通过组件间通信解决[^2][^5]。 3. **数据流未同步** 视图层与逻辑层数据更新需显式关联[^4]。 --- ### 最佳实践建议 1. **优先使用方案 1** 适用于快速修复，侵入性低。 2. **复杂场景用方案 2/3** 需修改组件逻辑，但可一劳永逸解决监听问题。 3. **调试工具验证** 使用微信开发者工具检查事件触发情况（参考引用[^2][^3]）。 --- ### 相关问题 1. **如何监听微信小程序组件的数据变化？** （涉及 `observers` 和自定义事件的使用场景） 2. **FormMaking 子表单数据绑定失效如何排查？** （检查数据路径、事件绑定和组件生命周期） 3. **`setData` 不触发界面更新的情况有哪些？** （数据路径错误、渲染层阻塞等） 4. **如何在父子组件间传递动态数据？** （`triggerEvent`、`properties` 的进阶用法） 5. **微信小程序的数据监听机制如何工作？** （`observers` 与数据更新的性能影响） [^1]: JS 事件处理需显式触发，控制台输出验证数据变化。 [^2]: 组件事件触发需通过 `bindchange` 显式绑定。 [^3]: 输入组件事件依赖用户交互或手动触发。 [^4]: 日期选择器等组件需通过 `bindchange` 同步数据。 [^5]: 表单字段更新需关联事件处理器。