Question

Jsfiddle显示了问题：Fiddle

我有几个div，并且在其中包含其他div（均由js创建），以及一个事件处理程序，该事件处理程序在单击时显示文本（'innerText'），我的问题是，事件处理程序会使整个内部div下降，这是什么原因造成的？

HTML

  <div class="container">
      <div id="board"></div>
  </div>

scc

.square{

  height: 100%;
  width: 50px;
  border: 1px solid black;
  display: inline-block;
  padding-top: 2.3%;
  box-sizing: border-box;
  text-align: center
}
.row{
  height: 50px;
  width: 500px;
}

js

/* creating state */
var cellsArr = [];
var cell = {state: 'clean', dangerScale:0}
for(i=0;i<100 ; i++){
  var cell = {state: 'clean', dangerScale:0};
  cellsArr.push(cell)
}
var ranArr = [], bomNum = 20;
for(i=0; i<bomNum; i++){
  ran = Math.floor(Math.random()*100);
  ranArr.push(ran)
}
for(i=0; i<ranArr.length; i++){
  cellsArr[ranArr[i]].state = 'dirty'
}

/* creating the dom */
var id = 0
for (var i = 0; i <= 9; i++) {
  var divRow = document.createElement('div')
  divRow.classList.add('row')

  for (var j = 0; j <= 9; j++) {
    var div = document.createElement('div')
    div.classList.add('square')
    div.id = id
    div.style.cursor = 'pointer';
    div.addEventListener('click',show)
    id ++
    divRow.appendChild(div)
  }
  document.getElementById("board").appendChild(divRow)
}
function show(ev){
  ev.target.innerText = cellsArr[ev.target.id].state;

}

防止内联块元素移出其父级

0 个答案: