面试题：React中阻止事件冒泡与捕获的方法及应用场景

阻止事件冒泡

在React中，阻止事件冒泡常用的方法是在事件处理函数中调用event.stopPropagation()。例如：

import React from 'react';

const ChildComponent = () => {
  const handleClick = (event) => {
    event.stopPropagation();
    console.log('子组件点击，阻止事件冒泡');
  };
  return <button onClick={handleClick}>点击我</button>;
};

export default ChildComponent;

阻止事件捕获

React中没有直接阻止事件捕获的原生方法，因为事件捕获阶段的事件处理函数在React中并不常用。但是，如果在DOM原生事件绑定中，可以在捕获阶段添加事件监听器并在处理函数中调用event.stopPropagation()来间接阻止捕获到更深层次的元素。在React中，如果要模拟类似效果，可以在父组件的捕获阶段处理函数中进行判断并决定是否继续传播。例如：

import React from 'react';

const ParentComponent = () => {
  const handleClickCapture = (event) => {
    if (event.target.id === '特定元素id') {
      event.stopPropagation();
    }
    console.log('父组件捕获阶段');
  };
  return (
    <div onClickCapture={handleClickCapture}>
      <ChildComponent />
    </div>
  );
};

export default ParentComponent;

实现特定需求

阻止子组件点击事件影响父组件点击逻辑：
- 在子组件的点击事件处理函数中调用event.stopPropagation()，如上述阻止事件冒泡示例，这样当子组件点击时，不会触发父组件的点击事件。
父组件捕获子组件特定事件：
- 在子组件中，对于特定事件（比如特定元素id的点击），可以通过自定义事件或者回调函数的方式通知父组件。
- 自定义事件方式：
  - 在子组件中创建一个自定义事件对象，例如：

import React, { useEffect } from'react';

const ChildComponent = ({ onCustomEvent }) => {
  const handleSpecialClick = () => {
    const customEvent = new CustomEvent('specialEvent', { detail: '自定义事件详情' });
    document.dispatchEvent(customEvent);
  };
  useEffect(() => {
    const handleDocumentClick = (event) => {
      if (event.type ==='specialEvent') {
        onCustomEvent(event.detail);
      }
    };
    document.addEventListener('specialEvent', handleDocumentClick);
    return () => {
      document.removeEventListener('specialEvent', handleDocumentClick);
    };
  }, [onCustomEvent]);
  return <button id="特定元素id" onClick={handleSpecialClick}>触发特定事件</button>;
};

export default ChildComponent;

回调函数方式：
- 在父组件中定义一个回调函数，然后将其作为props传递给子组件。

import React from'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const handleSpecialEvent = (detail) => {
    console.log('父组件接收到特定事件详情:', detail);
  };
  return (
    <div>
      <ChildComponent onCustomEvent={handleSpecialEvent} />
    </div>
  );
};

export default ParentComponent;

在子组件中，当特定事件发生时，调用这个回调函数：

import React from'react';

const ChildComponent = ({ onCustomEvent }) => {
  const handleSpecialClick = () => {
    onCustomEvent('自定义事件详情');
  };
  return <button id="特定元素id" onClick={handleSpecialClick}>触发特定事件</button>;
};

export default ChildComponent;

星途面试题库

面试题：React中阻止事件冒泡与捕获的方法及应用场景

知识考点

面试题答案

阻止事件冒泡

阻止事件捕获

实现特定需求