React中按钮onClick绑定函数未触发问题求助

问题现象 #

点击左右按钮时，绑定的handleLeftClick/handleRightClick函数未触发，控制台无任何报错信息。

相关代码 #

React组件代码 #

import { useEffect, useState, useRef } from 'react';
import './feed.css';
import esquerda from '../../img/esquerda.png'
import image1 from '../../img/sagwabooks-carrossel-1.jpeg'
import image2 from '../../img/sagwabooks-carrossel-2.jpeg'

const Feed = () => {
  const carousel = useRef(null);

  const handleLeftClick = (e) => {
    console.log("entrou")
    e.preventDefault();
    carousel.current.scrollLeft -= carousel.current.offsetWidth;
  };

  const handleRightClick = (e) => {
    console.log("entrou2")
    e.preventDefault();

    carousel.current.scrollLeft += carousel.current.offsetWidth;
  };


  return (
    <div className="container">
      <div className="logo">
      </div>
      <div className="carousel" ref={carousel}>
        
        <div className="item" key={1}>
            <div className="image">
            <img src={image1} alt="image1" />
            </div>
        </div>

        <div className="item" key={2}>
            <div className="image">
            <img src={image2} alt="image2"/>
            </div>
        </div>
    </div>

     <div className="buttons-left">
        <button onClick={handleLeftClick}>
          <img className="img-esquerda" src={esquerda} alt="Scroll Left" />
        </button>
    </div>
    <div className="buttons-right">
        <button onClick={handleRightClick}>
          <img className="img-direita" src={esquerda} alt="Scroll Right" />
        </button>
    </div>

    </div>
  );
}

export default Feed;

按钮相关CSS #

.img-esquerda{
  position:absolute;
  left:2%;
  top:30.5%;
  width: 50px;
  height: 50px;
}
.img-direita{
  position:absolute;
  left:96%;
  top:30%;
  width: 50px;
  height: 50px;
  transform: rotate(180deg);
}

问题根源 #

图片使用了position:absolute，脱离了按钮的文档流，导致图片覆盖在按钮上方。此时点击视觉上的"按钮区域"，实际触发的是图片的点击事件，而非按钮的点击事件，而图片未绑定任何处理函数，所以按钮的onClick逻辑不会执行。

解决方案 #

方案1：让点击事件穿透到按钮 #

给图片添加pointer-events: none，这样点击图片时，事件会直接传递到下方的按钮：

.img-esquerda{
  position:absolute;
  left:2%;
  top:30.5%;
  width: 50px;
  height: 50px;
  pointer-events: none; /* 添加这一行 */
}
.img-direita{
  position:absolute;
  left:96%;
  top:30%;
  width: 50px;
  height: 50px;
  transform: rotate(180deg);
  pointer-events: none; /* 添加这一行 */
}

方案2：调整定位到按钮容器 #

将绝对定位应用到按钮的父容器（.buttons-left、.buttons-right），保持图片在按钮内部的正常流，这样点击图片会触发按钮的点击事件：

.buttons-left {
  position: absolute;
  left: 2%;
  top: 30.5%;
}
.buttons-right {
  position: absolute;
  left: 96%;
  top: 30%;
}
.img-esquerda{
  width: 50px;
  height: 50px;
}
.img-direita{
  width: 50px;
  height: 50px;
  transform: rotate(180deg);
}

内容的提问来源于stack exchange，提问作者Elisa Souza