Событие, не выполненное по событию

Question

В режиме onmouseover над ячейкой создается div внутри этой ячейки. У этого div есть onclick. Но этот onclick не выполняется. Вот некоторые примеры кода: JSFiddle

JavaScript:

var oldCell=''; 
function addDiv(cell){ 
    if(oldCell != ''){ 
     oldCell.innerHTML = ''; 
    } 
    cell.innerHTML = "<div class='innerDiv' onclick='console.log(this.parentNode);'></div>"; 
    oldCell = cell; 
} 

HTML

<table border='1px solid black'> 
    <tr> 
     <td class='cell' onmouseover='addDiv(this)'></td> 
     <td class='cell' onmouseover='addDiv(this)'></td> 
    </tr> 
    <tr> 
     <td class='cell' onmouseover='addDiv(this)'></td> 
     <td class='cell' onmouseover='addDiv(this)'></td> 
    </tr> 
</table>​ 

Я попытался фокусирование на DIV, но это не вок либо. Я также попытался дать ячейке onclick, а затем сосредоточиться на ячейке вместо div, но это не работает в Chrome, но в FF.

Answer 1

Это кажется, что событие Mouseover создает новый объект внутри него каждый раз «Mouseover» событие называется. Нажатие на объект вызывает событие mouseover, что, скорее всего, заменяет элемент и, следовательно, делает невозможным вызов события onclick.

Моя догадка в списке событий: - Mouseover - MouseDown -> Mouseover - Объект заменен. - MouseUp (не считается щелчком, так как новый объект получает только мышь вверх)

---

Edit:

Если ваша цель состоит в том, чтобы просто создать эффект MouseHover, то вы должны использовать парить CSS в ключевое слово.

Смотрите эту скрипку, что делает по существу то, что вы пытаетесь сделать: http://jsfiddle.net/Tb2kK/27/

---

Edit: Для того, чтобы сделать это аналогично тому, как вы делаете это, вы должны проверить, если DIV уже существует. Одним из способов было бы присвоить идентификатор: http://jsfiddle.net/mZdpN/

Answer 2

заменить JS с

<script type="text/javascript"> 
    var oldCell = null; 
    function addDiv(cell){ 
     if (oldCell != null){ 
      oldCell.innerHTML = ''; 
     } 

     var div = document.createElement('div'); 
     div.className = 'innerDiv'; 
     div.onclick = function() { 
      console.log(this.parentNode); 
     }; 
     cell.appendChild(div); 
     oldCell = cell; 
    } 
</script>