結合jquery函數 - on（）hover/mouseenter/mouseleave

我有一系列元素（讓我們稱它們爲'.my-elements'） - 一些文檔已經準備就緒，而另一些則通過分頁腳本加載。結合jquery函數 - on（）hover/mouseenter/mouseleave

我想根據鼠標是否在這些元素上設置一個變量。下面的代碼工作，但我懷疑有更好的辦法......我可以這樣做，所以我只需要引用DOM一次？

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

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

謝謝！

來源

2012-03-21 Nicole Harris

您可以綁定到兩者一起，檢查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');

來源

2012-03-21 20:15:37

+1爲事件類型的想法。 – worenga 2012-03-21 20:20:58

感謝喬納森 - 解決方案1對我來說是最好的！ – 2012-03-21 20:28:26

正是我在找的，謝謝喬納森。 – jffgrdnr 2012-11-02 19:52:39

退房jQuery hover這是一樣的：

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

更新：我剛剛意識到，需要通過（）方法來持久化事件。在這種情況下，你可以使用一個事件映射，像這樣：

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

來源

2012-03-21 20:10:48

您也可以嘗試：

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

更新和修正

意識到你需要更多的動態密碼鎖哪種情況Jonathan Lonowski或Derek Hunziker's是完美的

來源

2012-03-21 20:13:18 SpYk3HH

這不適用於動態創建的元素。 **報價OP：** _「...一些文件準備就緒，而其他人稍後加載......」_ – Sparky 2012-03-21 20:17:38

幾乎所有的jQuery方法ret甕對象，所以你可以把它們結合在一起：

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

來源

2012-03-21 20:13:45

演示 - > http://jsfiddle.net/skram/qsmfb/ – 2012-03-21 20:16:13

警告字，由於它不可鏈接，所以這不適用於現場。 – jbabey 2012-03-21 20:27:31

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

但它通常不是一個好主意，有一個全局變量incidating一個事件狀態

來源

2012-03-21 20:14:35 worenga

將全局變量設置爲事件狀態指示器有哪些問題？ – 2012-03-21 20:48:23

對於初學者，您可以選擇您的元素而不是文檔。

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

你可以嘗試的快捷符號這樣的...

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

這會在每次鼠標進入或退出時，應保持mouse_is_inside變量設置爲正確的價值否定值。

來源

2012-03-21 20:16:16

結合jquery函數 - on（）hover/mouseenter/mouseleave

回答

相關問題