Question

在我的html结构中，我有一个锚标记元素，附加了hoverIntent插件事件。

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

每当我手动悬停在锚标签上时，它会执行一些ajax调用并从服务中恢复数据并显示弹出窗口。

我想从代码触发mouseenter / hover / mousemove（任何可以带来弹出窗口的东西）（无需任何手动操作）

我尝试了基本的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

读取该插件的来源，实际上应该在触发'mouseenter'时触发。您是否尝试使用以下代码触发它？

$('selector').mouseenter();

Answer 4

您可以只使用可重复使用的匿名函数，而不是使用匿名函数。这看起来是最简单的方法。

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

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

无论何时需要触发该功能，您只需执行doThat()。

Answer 5

你不只是从函数中调用你的ajax方法吗？为什么你需要使用hoverIntent，如果你想从你自己的代码调用它或我错过了什么？

Answer 6

我不知道您认为可以实际触发mouseenter。

可能更有利

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

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

Answer 7

执行jQuery悬停功能的正确方法如下

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

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()。

如何通过jquery以编程方式调用mouseenter事件

8 个答案: