javascript - jQuery : Kill Mouseenter/mouseleave function on mouseleave

Question

我对 mouseenter/mouseleave 函数有一些问题。

请看一下我的代码；

$(".elms").live(
{
    mouseenter: function (e) 
    {
        $("a").click(function()
        {
            alert('test');
        });
    },
    mouseleave: function (e) 
    {
        //do something else
    }
});

html:

<div class='elms'>test [ function says `test` ]</div>
<div class='elms'>test [ function says `test` and `test` ]</div>
<div class='elms'>test [ function says `test` and `test` and `test` ]</div>
<div class='elms'>test [ function says `test` and `test` and `test `test` and `test` ]</div>

这甚至会对 90 个元素重复，我想在休假时终止函数并创建新函数。像这样的事情:

var killIt = $(".elms").live(
{
    mouseenter: function (e) 
    {
        $("a").click(function()
        {
            alert('test');
        });
    },
    mouseleave: function (e) 
    {
        killIt.die();
    }
});

有什么想法吗？

[ fiddle :http://jsfiddle.net/29f3P/ ]

Answer 1

我不确定这是否是您想要的，在这种情况下，您每次将鼠标悬停在 .elms 元素上时都会添加一个监听器。如果您确实想在每次鼠标悬停时添加监听器，并且不希望看到重复的行为，可以使用绑定(bind)和取消绑定(bind)来设置鼠标事件，如here:所述。

$(".elms").live({
        mouseenter: function (e) {
             $("a").bind("click", function(){
                  alert('test');
             });

        },
        mouseleave: function (e) {
             $("a").unbind("click");

        }

});

我修改了你的 fiddle here: