如何对包裹在span中的图标触发span点击事件？

Question

我有一个基本的 React ToggleBtn 组件，可以更改向上/向下图标并触发模式。该按钮由文本和包裹在跨度中的图标组成。问题是单击图标时 event.target 不同。单击跨度上的文本时，会触发跨度单击事件，该事件会冒泡到按钮处理程序。但是，如果单击该图标，则会触发 svg click 事件。这是一个问题，因为模态框的位置与被单击的对象相关联。因此，如果单击图标，模态框的位置将不正确。 注意：我将文本和图标包裹在一个跨度中，以便它们并排显示。有没有办法让图标触发spans点击事件而不是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);
    // console.log("BtnName:", btnnName);
    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"
          d
          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;

Answer 1

您可以例如禁用

pointer-events

图标上的

svg

。

.disablePointerEvents {
    pointer-events: none;
}

<FontAwesomeIcon
   className="mg-l-4 content-dropdown-header disablePointerEvents"