当元素使用click函数时，它会忽略mouseleave

Question

我正在尝试使用JQuery在鼠标悬停时显示一个字符，但隐藏在mouseleave上。但是，当单击该元素时，我希望该角色保持不变，直到单击另一个元素。这有效，直到单击一个元素并再次鼠标悬停它。 mouseleave功能不再起作用。

此处示例http://jsfiddle.net/z5v25yhL/

    $('.sidecategory').on({
    mouseover: function(){
        $(this).next("span").show("fast");
    },
    mouseleave: function(){
        $(this).next("span").hide("fast");
    },
    click: function(){
        $('.sidecategory').not(this).next("span").hide();
        $(this).off('mouseleave');
    }
});

Answer 1

这是因为您每次点击一个元素时都会移除mouseleave事件：

$(this).off('mouseleave');

为避免这种情况，您可以在元素中添加一个类，以便选择它。

在mouseleave事件中，排除此.selected类，然后在单击一个元素时从所有元素中删除.selected类。这样，您就不再需要像之前那样删除mouseleave事件了。

Updated Example

$('.sidecategory').on({
    mouseover: function () {
        $(this).next("span").show("fast");
    },
    mouseleave: function () {
        $(this).not('.selected').next("span").hide("fast");
    },
    click: function () {
        $('.sidecategory').removeClass('selected').not(this).next("span").hide();
        $(this).addClass('selected');
    }
});

Answer 2

使用类是一个更好的解决方案，但也可以通过开/关来完成：

http://jsfiddle.net/z5v25yhL/1/

var selected;
var mleave = function () {
    $(this).next("span").hide("fast");
};

$('.sidecategory')
    .on('mouseover', function () {
        $(this).next("span").show("fast");
    }).on('mouseleave', mleave).on('click', function () {
        if(selected) {
            $(selected).on('mouseleave', mleave);
            $(this).off('mouseleave');
            $('.sidecategory').not(this).next("span").hide();
        } else {
            $(this).off('mouseleave');
            $('.sidecategory').not(this).next("span").hide();            
        }
        selected = this;
    });