javascript - 为 e.target 的父级获取 onClick 事件参数并添加自定义数据以传播 onClick 参数

Question

考虑两个 div。一个是 parent 。一个是 child 。 child 与 parent 部分重叠。

如果点击了父级上方的任何区域(即使它被子级挡住了)，我想接收 offsetX 父级。

但是，由于总是针对嵌套最多的元素计算 onClick evenargs，因此这似乎是不可能的，因此我决定使用以下解决方法:

1. child 会监听 onClicks。 onClick 出现后，它会将一些自定义数据附加到 eventargs。

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

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

1. 父级在捕获模式(在子级函数被调用后)监听 onClicks 并使用子级附加的附加数据来计算点击相对于 parent 。

    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.logs打印的数据一键延迟。当网站加载时，第一次点击的 e.customInfo 是 undefined。从第二次点击开始，它确实包含一个值，但它始终是上一次点击的值。它是如何发生的？

更新:虽然以上是正确的，但如果我们用 console.log(e) 替换 console.log(customInfo)，并检查 e 在 Google DevTools 中，它似乎确实包含 customInfo。然而，console.log(e.customInfo) 字面上是 undefined。如:

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>
           </>
       )
   }