Question

我有一个jquery脚本，如果用户mouseenter，element是.show（）和mouseleave，则element是.hide（）。但是如果你有用户点击，即使鼠标离开也想要显示元素怎么办？当用户点击？

时，您将如何覆盖鼠标提取？

我的脚本就是这样的

    $('.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();

        });

我如何处理点击？

谢谢！

Answer 1

当用户单击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
    });
});

尝试甚至可以尝试使用$('.block').hover(function(){},function(){})而不是单独处理mouseover和mouseleave事件。如果可能，请使用委派而不是使用live。但这只是与您的问题无关的意见。

编辑：与代表。注意这个工作div.blocks需要是

<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');
});

此外，您需要从单击的div中删除类块，以抵消.live或.delegate

的效果

Answer 2

您可以使用.unbind删除“mouseleave”的事件处理程序。此外，使用$（this）将引用触发事件的元素，无论事件处理程序是否附加到类名，因此您不需要获取id的代码。

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

    $(this.)show();

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

    $(this).hide();

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

    this.unbind("mouseleave");

});

Answer 3

我认为使用类来表示状态会更好一些，因此您可以相应地设置元素的样式。虽然这确实会对dom进行更多的查询，但它可能比在整个时间内添加和删除事件更好......这应该这样做：

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

BTW以下

$(this).show();

与

相同

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

你设法迈出了一步......？如果您没有隐藏/显示this，那么这可能是错误的方法，如果您隐藏/显示不同的元素，请确保相应地修改代码。

mouseenter并离开show and hide但在单击时覆盖

3 个答案: