jquery:mouseleave事件似乎不应该触发

时间:2010-03-08 18:58:02

标签: jquery mouseleave mouseenter

鉴于下面显示的html表和脚本,我遇到一个问题,鼠标离开事件似乎在鼠标进入后立即触发,即使我没有将鼠标移出行。

<script type="text/javascript" language="javascript">
    function highlightRows(iMainID) 
    {
        $('tr[mainid=' + iMainID+ ']').each(function() {
            if ($(this).attr('old') == undefined) {
                $(this).attr('old', $(this).css('backgroundColor'));
            }
            $(this).animate({ backgroundColor: "#FFFFCC" }, 500);
            $(this).mouseout(function() {
                if ($(this).attr('old') != undefined) {
                    $(this).animate({ backgroundColor: $(this).attr('old') }, 500);
                }
            });
        });        
    }
</script>
<table>
    <tr> 
      <td mainid="1" onmouseover='highlightRows(1)'><div>text</div></td>
      <td mainid="1" onmouseover='highlightRows(1)'><div>text</div></td>      
      <td mainid="2" onmouseover='highlightRows(2)'><div>text</div></td>
    </tr>
<table>

4 个答案:

答案 0 :(得分:3)

正如Pointy和Jer都指出的那样,你应该选择一个模型(JQuery)或另一个模型(在HTML中的任何内容),不要混用它们。

最有可能的是,您的双重录入与您多次订阅同一事件的事实有关。 (如果你进行两次鼠标悬停,你会得到两个将被调用的mouseout事件处理程序。)

另外,请注意重复的“mainid”值。这看起来像是一个问题,可能是您问题的原因。

答案 1 :(得分:1)

jquery方法就是使用hover,在$(document).ready函数中设置,像@pointy一样放弃onmouseover所有

$(document).ready(function(){
    $('tr').hover(function() {
       if ($(this).attr('old') == undefined) {
          (this).attr('old', $(this).css('backgroundColor'));
       }
       $(this).animate({ backgroundColor: "#FFFFCC" }, 500);
    }, function() {
       if ($(this).attr('old') != undefined) {
           $(this).animate({ backgroundColor: $(this).attr('old') }, 500);
       }
    });
});

答案 2 :(得分:1)

为什么不使用.hover?

$('tr[mainid=' + iMainID+ ']').hover(
        function()
        {
            $(this).addClass('hoverClass');
        },
        function()
        {
            $(this).removeClass('hoverClass');
        }
    );

答案 3 :(得分:0)

你可能想做这样的事情:

function yourMouseOver(){...}
function yourMouseOut(){...}

使用:

<td onmouseover="yourMouseOver()" onmouseout="yourMouseOut()">html</td>

每次触发onmouseout事件时设置onmouseover事件都是多余的。