实现div子元素仅点击自身容器背景时失去焦点的方案

当前问题 #

你的网页目前使用原生focus状态实现选中效果，但原生焦点行为会在点击页面任何可聚焦元素（比如按钮）时自动转移，导致p元素失去选中状态。要实现仅点击projectsDiv背景才取消选中的需求，需要用自定义状态替代原生焦点。

解决方案 #

用自定义CSS类（比如.active）模拟选中样式，通过JavaScript控制类的添加和移除：

• 点击p元素时，移除所有p的active类，给当前点击的p添加该类
• 点击projectsDiv的空白区域时，移除所有p的active类
• 点击页面其他元素（如tagsDiv的按钮）时，不改变p元素的选中状态

修改后的代码 #

HTML（无需修改）

<div class="container">
    <div id="projectsDiv">
        <p tabindex="0">P1</p>
        <p tabindex="0">P2</p>
        <p tabindex="0">P3</p>
    </div>
    <div id="tagsDiv">
        <button id="Tag1" class="Tag">Tag1</button>
        <button id="Tag2" class="Tag">Tag2</button>
        <button id="Tag3" class="Tag">Tag3</button>
    </div>
</div>

CSS

/* 用自定义active类替代原生focus */
#projectsDiv p.active {
    background-color: red;
}

#projectsDiv {
    border: 1px solid black;
    /* 给容器添加padding，方便点击空白区域 */
    padding: 10px;
}

JavaScript

const projectsDiv = document.getElementById('projectsDiv');
const projectPs = projectsDiv.querySelectorAll('p');

// 处理p元素点击事件
projectPs.forEach(p => {
    p.addEventListener('click', (e) => {
        // 阻止事件冒泡，避免触发projectsDiv的点击事件
        e.stopPropagation();
        // 移除所有p的active类
        projectPs.forEach(item => item.classList.remove('active'));
        // 给当前点击的p添加active类
        p.classList.add('active');
    });
});

// 处理projectsDiv空白区域点击事件
projectsDiv.addEventListener('click', () => {
    // 移除所有p的active类
    projectPs.forEach(item => item.classList.remove('active'));
});

说明 #

• 用.active类替代原生:focus，避免原生焦点的自动转移行为
• 点击p元素时阻止事件冒泡，防止触发容器的点击事件导致选中状态被立即移除
• 只有点击projectsDiv的空白区域时，才会取消所有p的选中状态；点击页面其他元素（如按钮）不会影响p的选中状态

内容的提问来源于stack exchange，提问作者Marcel Drąg