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

Answer 4

您也可以尝试：

$(".my-elements").hover(function(eIn) {
    // do work for mouse over
}, 
function(eOut) {
    // do work for mouse out
});

更新和更正

意识到你需要更多的动态锁定，Jonathan Lonowski或者Derek Hunziker的完美

Answer 5

对于初学者，您可以选择元素而不是文档。

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

您可以尝试这样的快捷方式......

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

每次鼠标进出时都会取消该值，这样可以将mouse_is_inside变量设置为正确的值。

Answer 6

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

但是拥有一个指示事件状态的全局变量通常不是一个好主意

结合jquery函数 - on（）hover / mouseenter / mouseleave

6 个答案: