Question

我正在动态创建一个具有一定数量的行和列的表。触发onmousedown事件后，它会运行一个循环，找出 颜色为红色。

我只是不明白在你发起<td></td>事件后如何停止背景颜色变化。

这是我坚持的代码部分：

onmouseup

Answer 1

JSFiddle 此处。

我补充说：

function mouseup() {
        var elements = document.querySelector('table').getElementsByTagName('td');
        for (var i = 0; i < elements.length; i++) {
            elements[i].onmousemove = null;
        }
    }

和

table.onmouseup = mouseup;

Answer 2

只需使用旗帜：

var flag = false;
function mousedown() {
    flag = true;
    var elements = document.querySelector('table').getElementsByTagName('td');
    for (var i = 0; i < elements.length; i++) {
        elements[i].onmousemove = function() {
            if (flag) this.style.background = "red";
        }
        elements[i].onmouseup = function() {
            flag = false;
        };
    }

}

Answer 3

略有不同的方法：http://jsfiddle.net/QYg28/

(function() {
    var body = document.querySelector('body');
    var table = document.createElement('table');

    function createTable(rows, columns) {
        var tr;
        var td;
        for (var i = 0; i < rows; i++) {
            tr = document.createElement('tr');
            table.appendChild(tr);
            for (var j = 0; j < columns; j++) {
                td = document.createElement('td');
                td.onmouseover = function(){ 
                    if(mouseDown)
                        this.style.background = "red";
                }
                tr.appendChild(td);
            }
        }
        body.appendChild(table);
    }

    mouseDown = false;

    function mousedown() {
        mouseDown = true;
    }

    function mouseup(){
        mouseDown = false;
    }

    window.onload = createTable(25, 25);
    table.onmousedown = mousedown;
    table.onmouseup = mouseup;
})();

如何摆脱onmousemove活动？

3 个答案: