香草javascript:element.close（）不处理元素

这是一个Sudoko生成器，我正在用vanilla javascript编程：

如果单击其中一个字段，将显示一个弹出窗口，其中包含从1到9的3x3个字段。问题是这个弹出窗口不能再关闭了，尽管我正在应用关闭对话框

我如何生成数独板的代码：

// create sudoku
function tableCreate() {
    var body = document.getElementsByClassName("frame")[0];
    var containerDiv = body.appendChild(document.createElement('div'))
    containerDiv.className = 'container';

    // create single cells with numbers
    function createInnnerCells(parent, xx, yy) {
        for (var x = 1; x <= 3; x++) {
            for (var y = 1; y <= 3; y++) {
                var abc = function () {
                    var div = parent.appendChild(document.createElement('div'))

                    var X = y+yy;
                    var Y = x+xx;
                    var id = 'x' + [X] + 'y' + [Y];

                    var cellValue = sudoku[X][Y]['value'] || '';

                    div.style.background = sudoku[X][Y]['background'] || 'white'
                    div.className = 'cell';
                    div.id = id;

                    var popover = createDialog(id);

                    popover.onclick = function() {
                        popover.close();
                    };

                    div.onclick = function() {
                        popover.show();
                    };

                    div.appendChild(popover);
                    div.appendChild(document.createTextNode(cellValue));
                };
                abc();
            }
        }
    }

    // create big cells for 3x3 single cells
    for (var i = 0; i <= 6; i+=3) {
        for (var j = 0; j <= 6; j+=3) {
            var div = containerDiv.appendChild(document.createElement('div'))
            div.className = 'block';
            createInnnerCells(div, i, j);
        }
    }
}

    // create dialog
    function createDialog(position){
        var dialog = document.createElement('dialog');
        dialog.id ='window_'+ position;

        var dialogblock = dialog.appendChild(document.createElement('div'));
        dialogblock.className = 'dialogblock';
        for (var z = 1; z <= 9; z++) {
            var div = dialogblock.appendChild(document.createElement('div'));

            div.className = 'dialogcell';
            div.id = position + 'z'+ z;
            div.appendChild(document.createTextNode(position));
        }

        dialog.onclick = function() {
            dialog.close();
        };

        return dialog;
    }

如何创建弹出窗口的代码：

// create sudoku
function tableCreate() {
    var body = document.getElementsByClassName("frame")[0];
    var containerDiv = body.appendChild(document.createElement('div'))
    containerDiv.className = 'container';

    // create single cells with numbers
    function createInnnerCells(parent, xx, yy) {
        for (var x = 1; x <= 3; x++) {
            for (var y = 1; y <= 3; y++) {
                var abc = function () {
                    var div = parent.appendChild(document.createElement('div'))

                    var X = y+yy;
                    var Y = x+xx;
                    var id = 'x' + [X] + 'y' + [Y];

                    var cellValue = sudoku[X][Y]['value'] || '';

                    div.style.background = sudoku[X][Y]['background'] || 'white'
                    div.className = 'cell';
                    div.id = id;

                    var popover = createDialog(id);

                    popover.onclick = function() {
                        popover.close();
                    };

                    div.onclick = function() {
                        popover.show();
                    };

                    div.appendChild(popover);
                    div.appendChild(document.createTextNode(cellValue));
                };
                abc();
            }
        }
    }

    // create big cells for 3x3 single cells
    for (var i = 0; i <= 6; i+=3) {
        for (var j = 0; j <= 6; j+=3) {
            var div = containerDiv.appendChild(document.createElement('div'))
            div.className = 'block';
            createInnnerCells(div, i, j);
        }
    }
}

    // create dialog
    function createDialog(position){
        var dialog = document.createElement('dialog');
        dialog.id ='window_'+ position;

        var dialogblock = dialog.appendChild(document.createElement('div'));
        dialogblock.className = 'dialogblock';
        for (var z = 1; z <= 9; z++) {
            var div = dialogblock.appendChild(document.createElement('div'));

            div.className = 'dialogcell';
            div.id = position + 'z'+ z;
            div.appendChild(document.createTextNode(position));
        }

        dialog.onclick = function() {
            dialog.close();
        };

        return dialog;
    }

---

我不知道为什么show（）工作，但是close（）不工作？

在您试图隐藏的元素上没有方法

close（）

。如果需要隐藏，则应该执行

element.style.display=“none”

。或执行以下操作：

dialog.addEventListener('click', function() {
  this.remove();
});

---

看看这个。

DOM事件通过其父级使DOM冒泡。在您的代码中，

对话框

是

div

的子项。因此，在

对话框

上会发生

单击

事件，然后在

div

上再次发生该事件，这意味着您正在关闭然后打开该对话框

您可以使用

event.stopPropagation

停止事件的传播

您可以按如下方式更改代码：

popover.onclick = function(e) {
  e.stopPropagation();
  popover.close();
};

及

---

修改了你的小提琴：

我也是这么想的，但是：邪恶。这也解释了为什么我能够在将close（）指定给单个

时关闭弹出窗口。谢谢你的回答！

dialog.onclick = function(e) {
  e.stopPropagation();
  dialog.close();
};