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元件工作正常。什么解释了这种行为以及如何让 onmouseover 在触及 TR 元素时触发？

Answer 1

如何将代码更改为：

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/

Answer 2

我的猜测是，这与冒泡/捕获模型有关。在文档本身上声明处理程序会在事件到达文档之前留下许多可以捕获事件的元素。不管怎样，我做了类似的事情，但是将我的处理程序放在 元素上。还值得注意的是，大多数主要的 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 演示。

Answer 4

你的问题是你的 tr 完全包含它的 tds，因此 TD 与 DOM 中的 TR 重叠；即，“目标”永远不会是TR。要测试这一点，请制作 2 个 TR，第一个具有 2 个 TD，第二个具有 1 个（或查看链接的 jsfiddle）

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

编辑：有趣的是，在 FFox 中，如果缺少 TD，则目标是“TR”，但在 chrome 中，目标是“Table”

简短回答：为了获得我认为您正在寻找的行为，请将 js 中的“TR”替换为“TD”