Javascript-firefox: Строки таблицы невозможно выделить

Question

document.onmouseover= function(event) {
    if (event===undefined) event= window.event;                     
    var target= 'target' in event? event.target : event.srcElement; 
    if(target.tagName == 'TR') {            
            target.style.backgroundColor = 'red';
        }else{
            target.style.backgroundColor = "yellow";
        }
};
document.onmouseout= function(event) {
    if (event===undefined) event= window.event;                     
    var target= 'target' in event? event.target : event.srcElement; 
    target.style.backgroundColor = "transparent";
};

Элементы TR никогда не выделяются, и событие onmouseover не запускается для этого.Элементы TD работают нормально.Чем объясняется такое поведение и как я могу запустить огонь при переборе, когда он касается элемента TR?

Answer 1

Ваша проблема в том, что ваш tr точно содержит свои tds, и, следовательно, TD перекрывают TR в DOM; то есть, «цель» никогда не будет TR. Чтобы проверить это, сделайте 2 TR, первый с 2 ​​TD, а второй с 1 (или посмотрите связанный jsfiddle)

http://jsfiddle.net/Asv4v/6/

Редактировать: Интересно, что в FFox, если отсутствует TD, целью является «TR», а в Chrome целью является «Таблица»

Краткий ответ: чтобы понять, как вы думаете, замените "TR" в js на "TD"

Answer 2

Я полагаю, что это как-то связано с моделью пузыри / захвата. Объявление обработчика в самом документе оставляет много элементов между ними, которые могут захватывать событие до того, как оно достигнет документа. В любом случае, я делаю что-то похожее на это, но помещаю свой обработчик в элемент <table>. Стоит также отметить, что большинство основных библиотек javascript имеют каркасы, чтобы помочь с этим. Мне лично нравится YUI или Prototype, хотя многие другие предпочитают Dojo или JQuery.

Answer 3

Вы можете использовать:

document.onmouseover = function(e){
    if (e.target.tagName.toLowerCase() == 'td'){
        e.target.parentNode.style.backgroundColor = 'red';
        e.target.onmouseout = function(){
            this.parentNode.style.backgroundColor = 'white';
        }
    } 
};

JS Fiddle demo .

Answer 4

Как насчет изменения вашего кода на:

var rows = document.getElementsByTagName('TR');
for (var i = 0, l = rows.length; i < l; i++) {
  rows[i].onmouseover = function (event) {
    this.style.backgroundColor = 'red';
  }

  rows[i].onmouseout = function (event) {
    this.style.backgroundColor = "transparent";
  }
}

Демо: http://jsfiddle.net/Asv4v/3/