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エレメントは、これを強調表示したり、イベントを発生させたりすることはありません。 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はTR内のTRを重複しています。すなわち、「ターゲット」は決してTRではない。 、これをテスト2つのTR、1と2つのTDと第二との最初の（またはリンクされたjsfiddleを参照）

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

を編集するには：ターゲットがある行方不明TDがある場合に興味深いことに、FFoxで「TR」が、クロムでは、ターゲットは、「表」

短い答えである：私はあなたが「TD」