文章/答案/技术大牛

发布

社区首页 >问答首页 >忽略父或子的事件处理程序

问忽略父或子的事件处理程序
EN

Stack Overflow用户

提问于 2021-08-11 13:40:59

回答 1查看 33关注 0票数 0

我有一个React组件的一部分，看起来像这样：

<div onClick={() => handleTriggerParent()}>
    <button type='button' onClick={() => handleTriggerChildren()}>
         Children
    </button>
</div>

当handleTriggerChildren()方法被触发时，我想忽略handleTriggerParent()方法。

实现这一目标的最好方法是什么？

reactjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-08-11 13:54:38

查看：https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

按如下方式定义button的单击处理程序：

onClick={(e) => {
  e.stopPropagation();
  handleTriggerChildren();
}}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68749210

复制

小程序中点击子元素事件而不触发父元素的点击事件

小程序微信

在测试小程序的时候，发现了这样的一个bug，点击子元素事件d的时候触发父元素的点击事件，从而执行父级的点击事件，跳转到了父级的点击事件的页面了。

王小婷

2019/02/21

6.2K0

禁止子视图响应父视图的点击事件

其他 http

用户1451823

2018/09/13

1.8K0

Vue父组件调用子组件事件

vue.js

Vue父组件向子组件传递事件/调用事件不是传递数据（props）哦，适用于 Vue 2.0 方法一：子组件监听父组件发送的方法方法二：父组件调用子组件方法子组件： export default { mounted: function () { this.$nextTick(function () { this.$on('childMethod', function () { console.log('监听成功') })

大鹅

2021/06/11

7530

Vue父组件与子组件传递事件/调用事件

vue.js

如上：通过this.$emit()来触发父组件的方法。具体就是子组件触发$emit绑定的事件watchChild，然后父组件监听watchChild，一旦watchChild被触发便会触发父组件的parentReceive方法。

IT工作者

2022/02/17

3.5K0

子组件派发事件和值给父组件

api window 事件

父组件通过v-on绑定子组件派发的事件，并触发一个新的事件，新的事件内可以接收传来的值

小小杰啊

2022/12/21

3110

自定义事件子组件与父组件通信

通信

子组件中使用 $emit(‘tt’) 1. 示例一 ---- <div id="app"> <parent @tt="go"></parent> {{ msg }} </div> <script> var par = { template: `<div> <button @click="$emit('tt', 'liang')">点我</button> </div>` } let vm = new Vue({ el: '#app', data: { msg: 'init' }, componen

很酷的站长

2023/02/17

4150

vue中在父组件点击按钮触发子组件的事件

button click message ref 事件

1、父组件的button元素绑定click事件,该事件指向notify方法 2、给子组件注册一个ref=“child” 3、父组件的notify的方法在处理时，使用了$refs.child把事件传递给子组件的parentMsg方法，同时携带着父组件中的参数msg 4、子组件接收到父组件的事件后，调用了parentMsg方法，把接收到的msg放到message数组中

江一铭

2022/06/16

6.6K0

事件处理程序

html

IE实现了与DOM中类似的两个方法：attachEvent()和detachEvent()。

RiemannHypothesis

2022/10/31

6940

浅谈JavaScript的事件（事件处理程序）

javascript html

　　事件就是用户或者浏览器自身执行的某种动作。诸如click、load和mouseover，都是事件的名字。而响应某个事件的函数就叫事件处理程序。事件处理程序的名字以“on”开头，比如click事件的事件处理程序是onclick。为事件指定事件处理程序的方式有多种方式。 HTML事件处理程序元素支持的事件，都可以使用与相应事件处理程序同名的HTML特性来指定。这个特性的值能支持一定的JavaScript代码。例如，在单击按钮的时候执行一些JavaScript代码。 <div id="aa" onclic

水击三千

2018/02/27

1.5K0

小程序父组件向子组件传值

java https javascript 网络安全

子组件：tabs1 父组件：demo04 先将子组件和父组件直接产生特定的联系，需要在demo04.json里面以键值对的方式添加。

全栈程序员站长

2022/08/30

6050

微信小程序父组件调用子组件的方法

methods

在子组件的里的methods里定义一个方法 // components/header/header.js Component({ properties: { }, data: {}, methods: { getrun() { console.log('我是子组件的方法') }, } }) 在父组件的调用里定义一个id唯一标识按钮用来获取子组件的方法 <header id="header"></header> <button bindtap="getson

明知山

2020/09/03

7.6K1

JavaScript事件处理程序

html

事件就是用户或者浏览器执行的某种操作。我们常用的点击，滚动视口，鼠标滑动都是事件，为响应事件而调用的函数被称为事件处理程序，在js中事件处理程序的名字以 on 开头。

大熊G

2022/11/14

5710

Vue-自定义事件之—— 子组件修改父组件的值

java

如何利用自定义的事件，在子组件中修改父组件里边的值？关键点记住：三个事件名字步骤如下：这里，相对本案例，父组件定义为Second-module，对应的子组件是Three-module 第一步：你

xing.org1^

2018/05/17

1.3K0

vue 父组件调用子组件的方法_vue子组件修改父组件值

https 网络安全

我们都知道通过$ref可以获取到某个DOM，但是它也可以用来获取子组件的实例，调用子组件的方法

全栈程序员站长

2022/11/09

2.2K0

子组件传对象给父组件_react子组件改变父组件的状态

数据库一体机 TData

sendData = () => { let data = ‘1234’; this.props.getData(data); //这个this,props.xxx 后面的xxx是是在父组件那使用的名字; }，然后可以在render函数后使用这个方法或者另外定义一个事件去触发该方法进行传值，

全栈程序员站长

2022/10/04

3K0

vue 父组件调用子组件的函数_vue子组件触发父组件方法

el function return ui upload

项目里将element-ui的el-upload写成公共组件方便调用，官方的before-upload方法用于处理上传前要做的事，如：比较文件大小，限制文件类型等，通过返回true 或 false 控制是否上传。当该组件调用父组件方法，并且要能获取到父组件方法的返回值，如何实现？

全栈程序员站长

2022/11/10

3.1K0

JavaScript事件对象与事件处理程序

addeventlistener dom event target 事件

事件对象：在DOM触发事件时，会产生一个事件对象event,这个事件对象包含着所有与事件相关的信息。既然event是事件对象，那么它必然存在属性

小蔚

2019/09/11

8460

微信小程序子组件监听父组件传递的值

微信小程序

Component({ properties: { qa: Object, }, observers: { 'qa': function (params) { console.log(params) },

明知山

2021/02/05

1.5K0

Vue 在父(子)组件引用其子(父)组件方法和属性

html node.js jquery vue.js

<button @click="callChildMethod()">父组件调用子组件方法</button>

授客

2020/06/23

1.9K0

vue父组件操作子组件的方法_vue父组件获取子组件数据

html

我们经常分不清什么是父组件，什么是子组件。现在来简单总结下：我们将某段代码封装成一个组件，而这个组件又在另一个组件中引入，而引入该封装的组件的文件叫做父组件，被引入的组件叫做子组件。具体代码如下

全栈程序员站长

2022/09/19

7.1K0

相似问题

如何忽略父事件处理程序以便在WPF中使用子事件处理程序(用于DragEvent)

ReactJS -处理子事件处理程序中的父事件

子控件阻塞父事件处理程序

如何忽略子触摸事件上的父触摸事件？

如何防止子节点上的父事件处理程序？

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

问忽略父或子的事件处理程序
EN