在mouseover / mouseout上未定义jQuery事件

时间:2010-10-04 17:17:10

标签: javascript jquery

嗨我有一个功能使用jQuery 1.3.2工作正常,但现在我试图用1.4.2运行它,我得到以下错误“事件未定义”。 这是简化的代码:

<div id="mapcontainer><img href="" usemap="#rage_image_map">
    <div id="mytext"></div>
</div>
<map name="rage_image_map">
    <area shape="poly" href="asthma-data/county-asthma-profiles/del-norte-county-asthma-profile" coords="12,7,10,12" alt="Del Norte County">
    <area shape="poly" href="asthma-data/county-asthma-profiles/siskyou-county-asthma-profile" coords="42,3,42,6,40,8,36,11" alt="Siskyou County">
</map>

这是功能:

$(function () {
    $('area').bind('mouseover mouseleave', function () {
        var mytext = $('#mytext');
        if (event.type == "mouseover") {
            var countyname = $(this).attr("alt");
            mytext.html(countyname);
            mytext.addClass('textcontainer');
        } else {
            mytext.text('');
            mytext.removeClass('textcontainer');
        }
    })
});

该类使div mytext可见并在其周围添加一条线,显示正在翻转的县名。

firebug中的错误中断位于定义mytext变量的行上。但我怀疑问题是下面的语法问题:if(event.type ==“mouseover”)

谢谢,Liz

1 个答案:

答案 0 :(得分:5)

您需要命名事件参数,如下所示:

$('area').bind('mouseover mouseleave', function(event){
                                                ^ add this

使用.hover()会更容易,例如:

$(function() {
  $('area').hover(function(){
    var countyname =  $(this).attr("alt");
    $('#mytext').html(countyname).addClass('textcontainer');
  }, function() {
    $('#mytext').text('').removeClass('textcontainer');
  });
});

完全相同,但通常更好一点,它使用mouseentermouseleave而不是mouseovermouseout(所以进入/离开孩子时不会开火。)