与悬停一起使用on()-jQuery

问题描述：

这就是我所拥有的:

$('#blah').hover(function(){
    $('etc').show();
}, function(){
    $('etc').hide();
});

这很好用，现在我希望上面的确切代码可以与on()方法一起工作:

This works just fine, now I want the exact above code working live with on() method:

$('#blah').on('hover', function(){
    $('#etc').show();
}, function(){
    $('#etc').hide();
});

但这是行不通的，有人知道为什么吗?但这也可行:

But this is not working, anybody knows why? but also this works:

$('#blah').on('hover', function(){
    $('#etc').show();
});

当我使用on()方法时，回调函数不起作用，所以我在on()中使用mouseover()和mouseleave()并起作用了，我只是想知道为什么悬停回调不起作用使用on()，这比使用2个事件更简单....

When I'm using on() method, the callback function is not working, so I'm using mouseover() and mouseleave() with on() and it's working, I just wanted to know why hover callback is not working with on(), that's so simpler than using 2 events....

谢谢

答

来自 JQuery 源代码，hover未包含在触发导致JQuery .on()

From the JQuery source code, hover is not included in the event list that triggered leading to JQuery .on()

jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
    "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
    "change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) {

    // Handle event binding
    jQuery.fn[ name ] = function( data, fn ) {
        return arguments.length > 0 ?
            this.on( name, null, data, fn ) :
            this.trigger( name );
    };
});

这是因为.hover()只是JQuery .mouseenter()和.mouseleave()

It is because .hover() is just a shortcut for JQuery .mouseenter() and .mouseleave()

jQuery.fn.hover = function( fnOver, fnOut ) {
    return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
};

我希望这个简短的解释能为您提供指导.

I hope this brief explanation provides little guidance.

与悬停一起使用on()-jQuery

相关推荐