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元素永远不会突出显示，也不会为此事件触发事件。 TD元素运行良好。是什么解释了这种行为，当触及TR元素时如何使onmouseover起火？

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

我的猜测是这会与冒泡/捕捉模型有关。声明文档本身的处理程序会在它们之间留下很多元素，这些元素可能会在事件到达文档之前捕获它。无论如何，我做了类似的事情，但把我的处理程序放在<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

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

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

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

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

Javascript-firefox：Table Rows无法突出显示

4 个答案: