javascript - 获取 e.target 父级的 onClick eventargs 并添加自定义数据以传播 onClick args

Question

考虑两个 div。其一是 parent 。一是 child 。子级与父级部分重叠。

如果单击父级上方的任何区域(即使它被子级遮挡)，我希望接收父级的 offsetX。

但是，由于始终为最嵌套的元素计算 onClick Evenargs，因此这似乎不可能，因此我决定使用以下解决方法:

1. 子进程监听 onClicks。一旦 onClick 到来，它就会将一些自定义数据附加到 eventargs。

const addOnClickInfo = (e) => {
    Object.assign(e, {customInfo: {startOfTimelineElementClicked: start}});
}

return <div onClick={addOnClickInfo} id='te' style={gridMemberStyle}></div>

父级在捕获模式(调用子级函数之后)中监听 onClick，并使用子级附加的附加数据来计算点击相对于家长。

    const onClickHandler = e => {
        console.log(e.customInfo); // IMPORTANT LINE
        console.log(e.customInfo.startOfTimelineElementClicked); // IMPORTANT LINE

    // Here, with startOfTimelineElementClicked we've got enough data to calculate offsetX for the parent.

    };

首先，是否有其他更简洁的解决方案(为 DOM 层次结构中比其子元素(即实际 event.target)更高的元素获取 eventargs)？

第二:上面console.log打印的数据有一点击延迟。网站加载时，第一次点击的 e.customInfo 为 undefined。从第二次单击开始，它确实包含一个值，但它始终是上一次单击的值。这是怎么发生的？

更新:虽然上述情况是正确的，但如果我们用 console.log(e) 替换 console.log(customInfo)，并检查 e code> 在 Google DevTools 中，它似乎包含 customInfo。然而，一行之后的console.log(e.customInfo)实际上是未定义的。如:

console.log(e) // Expanding it in Google DevTools; clearly has customInfo
console.log(e.customInfo) // undefined...?

Answer 1

您可以通过将 ref 附加到父级并传递一个函数以从父级检索当前 offsetX 来实现相同的效果

const Parent = () =>{
    const ref = useRef(null)

    const getOffset = ref.current ? ref.current.offsetX : null        

    return(
        <div ref={ref}>
            <Child getOffset={getOffset} />
        </div>
    )
}

在你的 child 里面

   const Child = ({ getOffset }) =>{
       const [offset, setOffset] = useState(getOffset())
       return (
           <>
               {`Current parent's offset: ${offset}`}
               <button onClick={() => setOffset(getOffset())}>Refresh offset </button>
           </>
       )
   }