Javascript 转换；“在表格中绘图”；功能-从jQuery到纯JS

我在css技巧网站的表格中找到了一个简单的绘图示例。使用jQuery时，它看起来如下所示：

$("#drawing-table").delegate("td", "mousedown", function() {
        mouseDownState = true;
        $el = $(this);
        if (eraseState) {
            $el.removeAttr("style");
        } else {
            $el.css("background", curColor);
        }
    }).delegate("td", "mouseenter", function() {
        if (mouseDownState) {
            $el = $(this);
            if (eraseState) {
                $el.removeAttr("style");
            } else {

                // DRAWING ACTION
                $el.css("background", curColor);
            }
        }
    });
    $("html").bind("mouseup", function() {
        mouseDownState = false;
    });

但是我需要使用jQuery使用相同的witout。所以我试着把它转换成纯JS。但现在我没有按预期工作。这是我得到的：

theTable = document.getElementById("drawing-table");

theTable.addEventListener("mousedown", function(e) {
    if (e.target.tagName === 'TD') {
        mouseDownState = true;
        el = e.target;
        if (eraseState) {
            el.removeAttribute("style");
        }
        else {
            el.style.backgroundColor = curColor;
        }
    }
});

theTable.addEventListener("mouseenter", function(e) {
    if (e.target.tagName === 'TD') {
        if (mouseDownState) {
            el = e.target;

            if (eraseState) {
                 el.removeAttribute("style");
            }
            else {
                el.style.backgroundColor = curColor;
            }
        }
    }
});

document.addEventListener("mouseup", function() {
    mouseDownState = false;
});

当我按住鼠标左键并将光标移动到要着色的单元格上（如在绘制中）时，脚本应更改单元格的颜色。但它只给我点击的单元格上色。 我认为问题是因为在jQuery版本中，mouseenter事件侦听器紧跟在mousedown事件侦听器之后。但我不知道如何将一个事件侦听器放到另一个事件侦听器上

---

原始代码取自

看起来您只是在鼠标进入表格时触发事件。每当鼠标进入表格单元格时，jQuery代码就会触发。当鼠标进入元素时，Mouseenter事件只触发一次。在元素周围移动鼠标时，不会重复激发。尝试将处理程序附加到表中的所有单元格

看起来您只是在鼠标进入表时触发事件。每当鼠标进入表格单元格时，jQuery代码就会触发。当鼠标进入元素时，Mouseenter事件只触发一次。在元素周围移动鼠标时，不会重复激发。尝试将处理程序附加到表中的所有单元格

您只需在代码中使用“onmouseover”而不是“mouseenter”侦听器

theTable.onmouseover = function(e){
        if (e.target.tagName === 'TD') {
            if (mouseDownState) {
                el = e.target;

                if (eraseState) {
                    el.removeAttribute("style");
                }
                else {
                    el.style.backgroundColor = curColor;
                }
            }
        }
    }

您只需要在代码中使用“onmouseover”而不是“mouseenter”侦听器

theTable.onmouseover = function(e){
        if (e.target.tagName === 'TD') {
            if (mouseDownState) {
                el = e.target;

                if (eraseState) {
                    el.removeAttribute("style");
                }
                else {
                    el.style.backgroundColor = curColor;
                }
            }
        }
    }

---

欢迎这么做。在写答案时，最好解释一下你的答案。你的答案不错，但也许可以说他们为什么应该使用onmouseoverYes是有道理的。谢谢你的信息。说明：“onmouseover”事件在用户将鼠标移动到特定元素上时触发。当用户点击表格时，我们已经在“mousedown”事件上设置了“mouseDownState”标志，那么“onmouseover”只是检查“mouseDownState”是否为真，光标是否在元素上，这给了我们想要的东西，即“点击并拖动绘图功能”Regardswellcom。在写答案时，最好解释一下你的答案。你的答案不错，但也许可以说他们为什么应该使用onmouseoverYes是有道理的。谢谢你的信息。说明：“onmouseover”事件在用户将鼠标移动到特定元素上时触发。当用户点击表格时，我们已经在“mousedown”事件上设置了“mouseDownState”标志，那么“onmouseover”只是检查“mouseDownState”是否为真，光标是否在元素上，这就给出了我们想要的东西，即“点击并拖动绘图功能”