onmouseover 反应慢 一闪就过去 是为什么

onmouseover 反应慢 一闪就过去 是为啥？
先附上代码 

<table  width="100%" border="0" cellspacing="1" cellpadding="0"  >
                                <tr height="27" align="center" style="color:#fff;">
                                        <td width="17%" height="35" bgcolor="#19283e"        class="th01">a</td>
                                        <td width="33%" height="35" bgcolor="#19283e" class="th01">b</td>
                                        <td width="10%" height="35" bgcolor="#19283e" class="th01">c</td>
                                        <td width="33%" height="35" bgcolor="#19283e" class="th01">d</td>
                                        <td width="8%" height="35" bgcolor="#19283e" class="th01">e</td>
                                </tr>

                                <tr>
                                        <td colspan="7" height="25" align="left" >
                                                <table height="26" width="100%" cellspacing="0" cellpadding="0" style="margin-top:10px; background:url(/images/main/img09.gif);">
                                                        <tr>
                                                                <td style="padding-left:8px;" width="21"><img align='absmiddle' src='/UpFile/League/Icon_51001627082010.jpg' width='25' height='19'/></td>
                                                                <td style="padding-left:7px;" class="txt09">a--- D1</td>
                                                        </tr>
                                                  </table>
                                        </td>
                                  </tr>
            
                                <tr> 
 
                                <!--        <td colspan="5" align="center" class="txt10" style="padding-left:4px;">
                    <table width="100%" id="box-table-a">
                    <tr>-->
                                        <td  align="center" style="padding-left:4px;">09/29 11:00</td>
                                        <td  align="center"  id="id1_415520" class="list_td"  onclick="addCart('ggu12',415520,1,'SMP','2013-09-29 11:00/sh:ke/SMP');"  onMouseover="highlight(this, true);" onMouseOut="highlight(this, false);" >
                                <span style="float:left;">sh</span>
                                <span style="float:right;">205</span></td>
                                        <td  align="center" id="id0_415520" 
        onMouseover="highlight(this, true);" onMouseOut="highlight(this, false);" 
                                        class="list_td"
        onclick="addCart('ggu12','415520',0,'SMP','2013-09-29 11:00/sh:ke/SMP');"
        >
                                320                                
                                        </td>
                                        <td  class="list_td" id="id2_415520" class="list_td" onclick="addCart('ggu12',415520,2,'SMP','2013-09-29 11:00/sh:ke/SMP');" onMouseOver="highlight(this, true);" onMouseOut="highlight(this, false);"><span style="float:left;">3030</span><span style="float:right;">ke</span></td>
                                        <td  align="center"  style="background-color:#2b2b2b; cursor:arow;"><font color="#FFCC00">ppl</font></td>
                        <!--        </tr>
                                </table>
                                </td>-->
                        </tr>
</table>
<sript>
function highlight(obj, isHover) {
        var cssClass = obj.className;
        //alert(cssClass);
        if(cssClass == "" || cssClass == "MouseOver") {
                obj.className = isHover ? "MouseOver" : "";
                return;
    } 
 

    var color = "#000000";
    var oddColor = "#000000";                
        if(isHover) {
                //obj.style.backgroundImage = "url(/images/main/bg19.gif)";
                //alert(cssClass);
                obj.style.backgroundColor = "#FFCC00";
                obj.style.borderColor = "#ffe066 #907608 #907608 #ffe066";
        } else {
            color = "";
            oddColor = "";
                obj.style.backgroundColor = "";
                obj.style.borderColor = "";
                //obj.style.backgroundImage = "url(/images/main/bg09.gif)";
    }

        obj.style.color = color;                                         // set color of this element
        var tds = obj.getElementsByTagName("TD");        // and all child TDs
        for (var i = 0; i < tds.length; i++) {
            if (tds[i].className == "odd") {
                        tds[i].style.color = color;
            } else {
                tds[i].style.color = color;
            }
        }                
}
</script>

以上代码里 tr是循环出来的。 我附上的是其中一个table的数据  

问题是td里的 onmouseover/out 效果 反应慢 鼠标上去了有的不会变效果 在一个 td里来回一下才出现效果  有时还是一闪就没了。 不知道是什么原因 。有没有人知道？    困惑了 2天  在不行 高手请求以上代码 改为 jquery的 也行  jquery 替代 onmouseover 效果。 jquery color class
[解决办法]
事件冒泡吧.. 改用jquery的 mosueEnter mouseLeave
[解决办法]
LZ使用jquery实现的话，可以参照下面的：

var table = $("#table1");  // 假设table的id为table1

function CreateTr() {
    var tr = $("<tr></tr>");
    var td = GetTd();
    $(td).appendTo(tr);
    $(tr).appendTo(table);
}

function GetTd() {
    var td = $("<td></td>");
    $(td).bind("mouseenter", function() {
        // logic
    });
    $(td).bind("mouseleave", function() {
        // logic
    });
    return td;
}

查看更多 下一篇