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;
});

当我按住鼠标左键并将光标移到要着色的单元格上时，脚本应更改单元格的颜色（例如在Paint中）。但这只会为我单击的单元格上色。我认为问题在于，在jQuery版本中， mouseenter 事件监听器紧接在 mousedown 事件监听器之后。但是我不知道如何将一个事件监听器放在另一个事件监听器上。

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

Answer 1

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

Ext.apply(me, {
    items : [{
        xtype : 'gridpanel',
        itemId : 'gridpanelId',
        margin : '0 0 0 0',
        layout : 'fit',
        viewConfig : {
            emptyText : '',
            deferEmptyText : false,
            markDirty : false
        },
            ftype : 'filters'
    }],
    store : errorstore,
    plugins : [Ext.create('Ext.grid.plugin.CellEditing', {
    pluginId : 'celledit',
    clicksToEdit : 1
    })],
    tbar : [{
        xtype : 'ixbutton',
        itemId : 'tbarswitcha',
        text : '',
        bgCls : 'but-image-base tbar_error_quit',
        height : 60,
        width : 90,
        margin : '0 10 0 10'
    }],
    columns : [{
        header : 'Startdate',
        itemId : 'ColumnStartdate',
        dataIndex : 'startdate',
        flex : 2,
        sortable : true,
        renderer : function(value) {
            return MyApp.app.formatDate(value);
                }
        },{
        header : 'Source',
        itemId : 'ColumnSource',
        dataIndex : 'source',
        flex : 3,
        sortable : false
        }
    ],
    bbar : {
        xtype : 'ixpagingtoolbar',
        itemId : 'ixpt',
        margin : '5 10 5 10',
        numbButtons : 4,
        width : 400
        }
    }]
});

Answer 2

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

转换“在表中绘制”功能-从jQuery到纯JS

2 个答案: