React组件中如何让span包裹的图标触发span点击事件？

问题描述 #

我有一个基础的React ToggleBtn组件，可切换上下箭头图标并触发模态框。按钮由文本和包裹在<span>内的图标组成。点击<span>内的文本时，事件会冒泡到按钮处理函数，event.target是<span>；但点击图标时，event.target变成了SVG元素。由于模态框的位置与点击对象绑定，点击图标时模态框定位错误。注：用<span>包裹文本和图标是为了让它们并排显示。有没有办法让图标触发<span>的点击事件而非SVG的点击事件？

原代码如下：

const ToggleBtn = ({ btnName, children, showContent, handleBtnClick }) => {

  const [displayProjectToggle, setDisplayProjectToggle] = useState(false);

  const handleShow = (event, btnName) => {
    event.preventDefault();
    event.stopPropagation();
    console.log("Content: Event:", event.target);
    console.log("Content: Event:", btnName)
    console.log("Content: Event:", event.target.parentElement);

    handleBtnClick(event, btnName);
    setDisplayProjectToggle(!displayProjectToggle);
  };

  useEffect(() => {
    // console.log("displayProjectToggle:", displayProjectToggle)
  }, [displayProjectToggle]);

  return (
    <div className={showContent ? "content-toggle-show" : "content-toggle-hide"}>
      <div className="content-toggle-chevron">
        <button
          className="nav-link dropdown-btn"
          onClick={(e) => handleShow(e, btnName)}
        >
          <span
            className="flex-container1"
            data-dropdown="dropdown2" aria-expanded="false"
            name="discover"
          >
            {btnName + " "}
            <FontAwesomeIcon
              className="mg-l-4 content-dropdown-header"
              data-dropdown="dropdown2" aria-expanded="false" name="discover"
              icon={
                displayProjectToggle
                  ? "fa-solid fa-chevron-down"
                  : "fa-solid fa-chevron-up"
              }
            />
          </span>
        </button>
      </div> {/*Header*/}

      {/*Content*/}
      <div className={displayProjectToggle ? "content-toggle-show" : "content-toggle-hide"}>{children}</div>
      {/*Content*/}
    </div>
  );
};

export default ToggleBtn;

解决方案 #

方案1：使用event.currentTarget替代event.target

event.currentTarget始终指向绑定事件处理函数的元素（这里是<button>），可以在处理函数中主动获取目标<span>元素，确保模态框定位用的是正确的容器：

修改handleShow函数：

const handleShow = (event, btnName) => {
  event.preventDefault();
  event.stopPropagation();
  // 强制获取span元素作为定位目标
  const targetElement = event.currentTarget.querySelector('.flex-container1');
  
  // 将修正后的目标元素传递给handleBtnClick
  handleBtnClick({...event, target: targetElement}, btnName);
  setDisplayProjectToggle(!displayProjectToggle);
};

方案2：给图标添加pointer-events: none

通过CSS让SVG图标不响应点击事件，点击会直接穿透到父级的<span>，这样无论点击文本还是图标，event.target都会指向<span>或按钮：

在样式文件中添加：

.content-dropdown-header {
  pointer-events: none;
}

方案3：把点击事件绑定到<span>上

直接将onClick事件从<button>移到<span>上，这样不管点击文本还是图标，事件的触发容器都是<span>：

修改JSX部分：

<button className="nav-link dropdown-btn">
  <span
    className="flex-container1"
    data-dropdown="dropdown2" aria-expanded="false"
    name="discover"
    onClick={(e) => handleShow(e, btnName)}
  >
    {btnName + " "}
    <FontAwesomeIcon
      className="mg-l-4 content-dropdown-header"
      data-dropdown="dropdown2" aria-expanded="false" name="discover"
      icon={
        displayProjectToggle
          ? "fa-solid fa-chevron-down"
          : "fa-solid fa-chevron-up"
      }
    />
  </span>
</button>

推荐方案 #

如果只是快速解决定位问题，方案2最简洁，仅需一行CSS；如果需要更精确的事件控制，方案1或3更合适。

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