Question

考虑两个div。一个是父母。一个是孩子。孩子与父母部分重叠。

如果单击父级上方的任何区域（即使被孩子阻止），我也要接收父级的offsetX 。

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

孩子在听onClicks。一旦onClick出现，它会将一些自定义数据附加到eventargs。

const addOnClickInfo = (e) => { Object.assign(e, {customInfo: {startOfTimelineElementClicked: start}}); } return <div onClick={addOnClickInfo} id='te' style={gridMemberStyle}></div>

父级以捕获模式（在调用子级功能后之后）监听onClicks，并使用子级附加的其他数据来计算点击相对于相对位置的位置父母。

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层次结构中某个元素的eventargs高于其子元素（即实际的event.target），来解决此问题？

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

更新：尽管以上说法是正确的，但是如果我们用console.log(e)代替console.log(customInfo)，并在Google DevTools中检查e，则它似乎包含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>
           </>
       )
   }

Answer 2

严重错误，捕获的事件在未捕获的事件之前被调用，而不是相反。这样就解决了这个问题。

它也可能解释了DevTools问题。仅当您扩展对象以查看其内容时，它才会加载对象数据，而到我设法扩展它时，该事件已经完成了冒泡阶段。

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

2 个答案: