javascript - 组合 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

您可以将两者绑定(bind)在一起并检查 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');