javascript - 转换 "drawing in a table"功能 - 从 jQuery 到纯 JS

Question

我在 css-tricks 网站上的表格中找到了一个简单绘图的示例。使用 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 来实现同样的效果。所以我尝试将其转换为纯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 事件监听器之后。但我不知道如何将一个事件监听器放在另一个事件监听器之后。

原始代码取自https://css-tricks.com/examples/DrawingTable/

Answer 1

您只需在代码中使用“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;
                }
            }
        }
    }