JS同级DOM元素自定义点击事件冒泡实现方案咨询

由于小正方形z-index更低，被大正方形覆盖的区域默认只能接收到大正方形的点击事件，直接在大正方形的点击逻辑中增加区域判断即可实现需求，无需修改两个div的兄弟结构，完全满足约束。

完整React代码 #

import { useRef } from 'react';

function App() {
    const smallDom = useRef(null);

    const clickOnSmall = () => {
        console.log('SMALL')
    }

    const clickOnLarge = (e) => {
        // 先执行大正方形自身的点击逻辑，需要先触发小正方形就把下面这行移到判断后
        console.log('LARGE')
        
        // 判断点击位置是否落在小正方形范围内
        if (smallDom.current) {
            const { left, right, top, bottom } = smallDom.current.getBoundingClientRect();
            const { clientX, clientY } = e;
            const hitSmall = clientX >= left && clientX <= right && clientY >= top && clientY <= bottom;
            if (hitSmall) clickOnSmall();
        }
    }

    return (
        <div className="App">
            <div ref={smallDom} className={'small'} onClick={clickOnSmall}></div>
            <div className={'large'} onClick={clickOnLarge}></div>
        </div>
    )
}

实现说明 #

• CSS部分不需要做任何修改，保持原有样式即可
• 通过useRef拿到小正方形的DOM实例，用getBoundingClientRect()获取它在视口中的精确边界
• 大正方形被点击时，先执行自身逻辑，再比对点击坐标是否在小正方形的边界范围内
• 若命中小正方形区域，主动调用小正方形的点击回调，实现两个事件同时触发的效果

效果匹配 #

• 点击大正方形未覆盖小正方形的边缘区域：仅输出LARGE，符合需求1
• 点击大正方形覆盖小正方形的中心区域：同时输出LARGE和SMALL，符合需求2
• 两个div始终为兄弟节点，未做嵌套，符合约束条件

内容的提问来源于stack exchange，提问作者Ofir Salem