如何通過jquery以編程方式調用mouseenter事件

Question

在我的html結構中，我有一個附有hoverIntent插件事件的錨標記元素。

 $('a').hoverIntent(function(event){// some code to show popup;}) 

只要我手動懸停在錨標記上，它會執行一些ajax調用並從服務中取回數據並顯示彈出窗口。

我想要觸發的mouseenter /懸停/鼠標移動（任何可以帶來彈出）從碼（無需任何手動操作）

我想基本的jQuery功能，如

$('selector').trigger('hover') and 
    $('selector').trigger('mouseenter') 

但是毫無效果，這可以在不中斷用戶的情況下調用懸停/鼠標輸入功能嗎？

Answer 1

hoverIntent jQuery插件同時使用mouseenter和mousemove事件來確定是否觸發。如果您只是簡單觸發mouseenter事件，則不會因此發生任何事情。

您需要先調用mouseenter事件幷包含鼠標位置。然後你需要調用mousemove事件，也包括鼠標位置。

這個jsbin顯示了這個例子。如果您在沒有首先懸停綠色框的情況下懸停「懸停我」項目，則什麼都不會發生。你是否在綠色框中懸停使其變成紅色，之後「懸停我」鏈接將起作用。若要以編程方式觸發此不先徘徊在綠中，使用這些調用：

var e = $.Event('mouseenter'); 
e.pageX = 50; 
e.pageY = 50; 
$("#testing").trigger(e); 

var e2 = $.Event('mousemove'); 
e2.pageX = 50; 
e2.pageY = 50; 
$("#testing").trigger(e2);

Answer 2

您可以隨時重新考慮您的代碼。相反的：

$('a').hoverIntent(function(event){// some code to show popup;}) 

做：

function myFunc(event){// some code to show popup;} 

$('a').hoverIntent(myFunc); 

然後，你可以叫myFunc的直接，而不是試圖 「模擬」 一個DOM事件。

Answer 3

而不是使用匿名函數，你可以做一個可重用的。它看起來是最簡單的方法。

function doThat(event){ 
    // do some stuff 
} 

$('a').hoverIntent(doThat); 

而且只要您需要觸發該功能，您只需執行doThat()。

Answer 4

你不只是從函數調用你的ajax方法嗎？爲什麼你需要使用hoverIntent，如果你想從你自己的代碼中調用它，或者我錯過了什麼？

Answer 5

我不知道你是否真的可以觸發mouseenter。這可能是

$('selector').bind('focus', function(e) { 
//code 
}); 

//Then do 
$('selector').focus(); 

Answer 6

正確的方式做一個jQuery懸停功能如下

$('selector').hover(
    function(){ //This function is called on mouseenter(); 
     //code 
    },function(){ //This function is called on mouseleave(); 
     //code 
}); 

Answer 7

閱讀該插件的源更爲有利，它其實應該當「的mouseenter」是被解僱觸發。你有沒有嘗試使用下面的代碼觸發它？

$('selector').mouseenter(); 

Answer 8

沒有jQuery的鉤子，你總是可以讓瀏覽器真正的，完全模擬事件：

var evt = document.createEvent('MouseEvents'); 
evt.initMouseEvent('mouseenter', false, false, window, 
        0, 1, 2, 3, 4, 
        false, false, false, false, 0, null); 
$('selector')[0].dispatchEvent(evt); 

// or, for multiple matched 
$('selector').each(function(){ this.dispatchEvent(evt); }); 

欲瞭解更多詳情，請閱讀the documentation on initMouseEvent()。