学习react过程中遇到的JavaScript 的事件冒泡问题

素发随风扬

已于 2023-08-29 17:28:55 修改

阅读量165

点赞数

文章标签： javascript 前端开发语言 react

于 2023-08-29 17:25:22 首次发布

本文链接：https://blog.csdn.net/a1009698473/article/details/132566220

版权

文章讲述了在React项目中，如何避免点击图片时同时触发父元素的onClick事件。通过在图片的onClick事件中使用e.stopPropagation()方法阻止事件冒泡，实现了点击图片和背景切换效果的独立控制。

摘要由CSDN通过智能技术生成

项目场景：

提示：这里简述项目相关背景：
用react实现实现点击图片和背景时分别切换不同的效果

问题描述

提示：这里描述项目中遇到的问题：
点击图片事件时，会触发父元素的点击事件

import { useState } from 'react';

export default function Picture() {
  const [isActive, setIsActive] = useState(false);

  let backgroundClassName = 'background';
  let pictureClassName = 'picture';
  if (isActive) {
    pictureClassName += ' picture--active';
  } else {
    backgroundClassName += ' background--active';
  }

  return (
    <div
      className={backgroundClassName}
      onClick={() =>{ setIsActive(false);
  alert(`父元素"${isActive}"`)}}
    >
      <img
        onClick={e => {
          setIsActive(true);
          alert(`子元素"${isActive}"`)
        }}
        className={pictureClassName}
        alt="Rainbow houses in Kampung Pelangi, Indonesia"
        src="https://i.imgur.com/5qwVYb1.jpeg"
      />
    </div>
  );
}

原因分析：

在这段代码中，图片元素（img）是父元素（div）的子元素，所以当点击图片时，除了触发图片的 onClick 事件，还会触发父元素的 onClick 事件，因为事件冒泡的原理。

解决方案：

如果不想让父元素的 onClick 事件被触发，就需要在图片的 onClick 事件中调用 e.stopPropagation() 方法，来阻止事件冒泡。这样就可以实现点击图片和背景时分别切换不同的效果。


     <img
        onClick={e => {
          e.stopPropagation();
          setIsActive(true);
          alert(`子元素"${isActive}"`)
        }}
        className={pictureClassName}
        alt="Rainbow houses in Kampung Pelangi, Indonesia"
        src="https://i.imgur.com/5qwVYb1.jpeg"
      />