ванили JavaScript: element.close() не работает на элементе

Question

Это генератор Sudoko Я программирования в ванильным JavaScript:

Fiddle with code

Nicer looking full screen fiddle

Если щелкнуть на одном из полей , всплывающее окно будет показано с полями 3x3 от 1 до 9. Проблема в том, что это всплывающее окно больше не может быть закрыто, хотя я применяю диалог закрытия.

код, как я генерировании доска Судоку:

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

Обратите внимание, что я применить функцию, близкую() к каждой ячейке:

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

код, как я создать всплывающее окно:

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

я применил близко() Диалоговое здесь также

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

Я не знаю, почему шоу() работает, но близко к этому (не)?

Answer 1

DOM событиями пузыря DOM через своих родителей. В вашем коде dialog является ребенком div. Поэтому событие click происходит на dialog, а затем снова на div, что означает, что вы закрываете, а затем открываете диалог.

Вы можете остановить распространение события, используя event.stopPropagation.

Вы можете изменить свой код так:

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

и

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

Изменив скрипку: http://jsfiddle.net/p40oahkd/9/

Answer 2

Нет элемента close() на элементе, который вы пытаетесь скрыть. Вы должны либо сделать element.style.display = "none", если вам нужно спрятаться. Или выполните следующие действия:

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

Отъезд edit to your fiddle.