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

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

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

如果父元素和子元素同时绑定了同样类型的事件(如click),

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

e.stopPropagation();

参考代码

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

 

 

### 实现 uniapp 中父组件点击触发组件事件并传值 在 UniApp 开发框架下,为了使父组件能够通过点击操作来触发组件内的特定行为或函数执行,并传递参数给组件,可以采用如下方式: #### 定义组件的方法供外部调用 首先,在组件内部定义好待被调用的方法。假设有一个名为 `childMethod` 的方法用于处理来自父级的操作请求。 ```javascript // 组件 script 部分 export default { methods: { childMethod(param) { console.log('组件接收到的参数:', param); // 执行具体逻辑... } } } ``` #### 使用 ref 属性获取组件实例 接着,在父组件中引入该组件并通过 `ref` 特性为其指定唯一标识符,以便后续可以通过此 ID 访问到具体的 Vue 组件对象。 ```html <!-- 父组件 template --> <template> <view class="container"> <!-- ...其他代码... --> <!-- 引入组件并设置 ref 值为 'myChildComponent' --> <MySubComponent ref="myChildComponent"></MySubComponent> <!-- ...其他代码... --> <!-- 添加按钮或其他交互元素用于触发展示组件功能 --> <button type="primary" @click="triggerChildEvent">点击我</button> </view> </template> ``` #### 编写父组件中的触发逻辑 最后一步是在父组件内编写响应用户动作(比如点击)后的回调函数,利用 `$refs` 对象找到对应组件实例,并直接调用其公开的方法来进行通信[^1]。 ```javascript // 父组件 script 部分 methods: { triggerChildEvent() { const messageToPass = "这是从父组件发送的消息"; this.$refs.myChildComponent.childMethod(messageToPass); // 调用组件的方法并向其传递消息 } } ``` 上述过程展示了如何让父组件主动发起对组件的行为控制以及数据传输的方式。值得注意的是,这种方式依赖于 JavaScript 的作用域链机制和 Vue.js 提供的 API 支持,确保了父之间高效而灵活的信息交换[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值