结合jquery函数 - on()hover/mouseenter/mouseleave

Question

我有一系列元素(让我们称之为'.my-elements') - 一些文件准备加载,而其他元素稍后通过分页脚本加载.

我想根据鼠标是否在这些元素上来设置变量.下面的代码有效,但我怀疑有更好的方法......我可以这样做,所以我只需要引用一次DOM吗？

$(document).on('mouseenter','.my-elements', function(){
    mouse_is_inside = true;
});

$(document).on('mouseleave','.my-elements', function(){
    mouse_is_inside = false;
});

谢谢!

Answer 1

您可以将两者绑定在一起并检查event.type:

$(document).on('mouseenter mouseleave', '.my-elements', function (ev) {
    mouse_is_inside = ev.type === 'mouseenter';
});

或者,如果要将它们分开,请使用.on另一种采用事件映射的语法:

$(document).on({
    mouseenter: function () {
        mouse_is_inside = true;
    },

    mouseleave: function () {
        mouse_is_inside = false;
    }
}, '.my-elements');

Answer 2

查看jQuery hover,它与以下内容相同:

$(selector).mouseenter(handlerIn).mouseleave(handlerOut);

更新:我刚刚意识到你需要通过on()方法来持久化事件.在这种情况下,您可以使用如下事件映射:

.on({
    mouseenter: function() {
        console.log('enter');
    },
    mouseleave: function() {
        console.log('bye!');
    }
})

Answer 3

几乎所有的jQuery方法都返回对象，因此您可以将它们链接在一起：

$(document).on('mouseenter','.my-elements', function(){
    mouse_is_inside = true;
}).on('mouseleave','.my-elements', function(){
    mouse_is_inside = false;
});