單擊子元素時，React 單擊事件不起作用

Question

這是我的代碼

export default myComponent = () => {
    const handleClick = (e) => {
        const parent = e.target.parentElement;

        if (parent.classList.contains('selected_category')) {
            parent.classList.remove('selected_category');
        } else {
            parent.classList.add('selected_category');
        }
    };

    return (
        <>
            <ul>
                <li className="">
                    <a onClick={handleClick}>
                        content<span class="text-gray-25 font-size-12 font-weight-normal">
                            121
                        </span>
                    </a>
                </li>
                <li className="">
                    <a onClick={handleClick}>
                        content<span class="text-gray-25 font-size-12 font-weight-normal">
                            121
                        </span>
                    </a>
                </li>
            </ul>
        </>
    );
}

我寫了這段代碼，當我點擊標簽元素時，它的父元素會獲得類“selected_category”（如果它還沒有的話）。 但這里的問題是當我單擊子類時，“selected_category”類被添加到父標簽中。 有什么解決方案可以防止它嗎？

這是我在沙盒中的代碼

Answer 1

要在我的意見進一步闡述：這個問題來自於使用e.target ，這可以參照該事件，聽者一定會或其后代（S）的元素。 在這種情況下，您的<a>標簽將<span>作為子標簽。 當點擊事件冒泡到源自內部<span> <a>標簽時， e.target將引用后者：這不是您想要的。

為了確保您始終獲得對事件偵聽器綁定到的實際元素的引用，您需要使用e.currentTarget ：

當事件遍歷 DOM 時， Event接口的currentTarget只讀屬性標識Event的當前目標。 它始終指的是事件處理程序已附加到的元素，而不是Event.target ，后者標識發生事件的元素以及它可能是其后代的元素。

因此，您更新的函數應該簡單地使用currentTarget代替，即：

const handleClick = (e) => {
    // NOTE: Use e.currentTarget here instead of e.target
    const parent = e.currentTarget.parentElement;

    if (parent.classList.contains('selected_category')) {
        parent.classList.remove('selected_category');
    } else {
        parent.classList.add('selected_category');
    }
};