Jquery 鼠标输入并保留“显示”和“隐藏”，但在单击时覆盖

我有一个jquery脚本，其中如果用户mouseenter，元素为.show（），mouseleave，元素为.hide（）。但是，如果让用户单击，并且即使鼠标离开也要显示元素，该怎么办？当用户单击鼠标时，您将如何覆盖mouseleave

我的剧本是这样的

    $('.block').live("mouseenter",function(){
                var id= $(this).attr('id');
                $('#'+id).show();
                $(this).click(function(){
                      //show? is this how it works? not sure where click should go.
        });

            }).live("mouseleave",function(){
            var id= $(this).attr('id');
            $('#'+id).hide();

        });

我如何处理点击

---

谢谢

当用户单击div时，可以解除mouseleave事件处理程序的绑定

$(function() {

    $('.block').live("mouseenter", function() {
        var id = $(this).attr('id');
        $('#' + id).show();
        $(this).click(function() {
            //show? is this how it works? not sure where click should go.
        });

    }).live("mouseleave", function() {
        var id = $(this).attr('id');
        $('#' + id).hide();

    }).live("click",function(){
         $(this).unbind("mouseleave"); 
         $(this).removeClass('block');  //this was added
    });
});

Try甚至可以尝试使用

$（'.block'）.hover（function（）{}，function（）{}）

而不是单独处理

mouseover

和

mouseleave

事件。如果可能，还可以使用委派而不是使用

live

。但这只是一个与你的问题无关的观点

编辑：与代表一起编辑。注意：要使其工作，div.block需要如下

<div id="container">
<div class="block">
<div class="block">
</div>



$('#container').delegate('.block', 'mouseenter', function() {
    var id = $(this).attr('id');
    $('.msg').html('I entered :' + id);

});
$('#container').delegate('.block', 'mouseleave', function() {
    var id = $(this).attr('id');
    $('.msg').html('I came out of :' + id);

});
$('#container').delegate('.block', 'click', function() {
    var id = $(this).attr('id');
    $('.msg').html('I entered and clicked :' + id);
    $(this).unbind("mouseleave");
    $(this).removeClass('block');
}); 

$（'#container'）.delegate（'.block'，mouseenter'，function（）{
var id=$（this.attr（'id'）；
$（'.msg'）.html（'我输入：'+id）；
});
$（'#container'）.delegate（'.block'，mouseleave'，function（）{
var id=$（this.attr（'id'）；
$（'.msg'）.html（'我来自：'+id）；
});
$（'#容器'）。委托（'.block'，click'，function（）{
var id=$（this.attr（'id'）；
$（'.msg'）.html（'我输入并单击：'+id）；
美元（此）。解除绑定（“鼠标悬空”）；
$（this.removeClass（'block'）；
}); 

---

此外，您还需要从单击的div中删除类块，以抵消可以使用的

.live

或

.delegate

的影响。取消绑定以删除“mouseleave”的事件处理程序。此外，使用$（this）将引用触发事件的元素，而不管事件处理程序是否附加到类名，因此您不需要获取id的代码

$('.block').live("mouseenter",function(){

    $(this.)show();

}).live("mouseleave",function(){

    $(this).hide();

}).live("click", function(){

    this.unbind("mouseleave");

});

---

我认为使用类来表示状态稍微好一点，这样就可以相应地设置元素的样式。虽然这确实会查询dom多一点，但它可能比一直添加和删除事件要好。。。这应该做到：

    $('.link').live({
        mouseenter: function(){
            if(!$('.link.locked').length)
            {
                $(this).show();
            }
        }, 
        mouseleave: function(){
            if(!$(this).hasClass('locked'))
            {
                $(this).hide();
            }
        },
        click: function() {
            $(this).toggleClass('locked');
        }
    });

顺便说一句，这是以下内容

$(this).show();

与

var id = $(this).attr('id');
$('#'+id).show();

---

你设法多走了一步？如果您没有隐藏/显示

此

则这可能是错误的做法，如果您隐藏/显示不同的元素，请确保相应地修改代码。

使用

.die

而不是

。解除绑定

在语义上可能更正确。然而，这一条也适用：）你能举一个使用委派的例子吗？我的单击似乎无法让我知道解决方案现在是否有效。。您必须从div中删除类块，以抵消live和delegate（无论您想使用哪种类型）的影响