原生JS实现按住鼠标拖拽时改变div背景色的问题求助

问题根源 #

你的代码存在两个核心问题：

1. 事件绑定逻辑错误：仅在mouseover事件内绑定mousedown，导致只有首次点击的cell能触发变色，且无法响应拖拽过程中的鼠标悬浮
2. 浏览器默认行为干扰：拖拽时触发了元素选中的默认行为，导致光标变成禁止符号

修复后的完整代码 #

<style>
    #container{
        margin: auto;
        margin-top: 20px;
        height: 200px;
        width: 200px;
        background-color: aquamarine;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(4, 1fr);
    }
    .cell {
        border: 1px solid #fff;
    }
</style>
<body>
    <div id="container">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>

    <script>
        let isMouseDown = false;
        const cells = Array.from(document.getElementsByClassName('cell'));

        document.addEventListener('mousedown', () => {
            isMouseDown = true;
        });

        document.addEventListener('mouseup', () => {
            isMouseDown = false;
        });

        cells.forEach(cell => {
            cell.addEventListener('mouseover', () => {
                if (isMouseDown) {
                    cell.style.backgroundColor = "black";
                }
            });

            cell.addEventListener('mousedown', (e) => {
                e.preventDefault();
                cell.style.backgroundColor = "black";
            });
        });
    </script>
</body>

关键修复点 #

• 全局状态跟踪：用isMouseDown变量统一记录鼠标按下状态，避免每个cell单独绑定事件的局限性
• 事件绑定优化：直接给每个cell绑定mouseover事件，只要鼠标处于按下状态就触发变色，支持拖拽过程中的连续变色
• 阻止默认行为：在cell的mousedown事件中调用e.preventDefault()，避免浏览器触发元素选中行为，解决禁止光标问题

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