0

我正在使用jquery-ui 手风琴，它会在鼠标悬停而不是单击时打开一个部分，但是我注意到如果您将鼠标快速悬停在多个项目上，则被选中的项目是您的鼠标悬停的第一个项目，而不是最后一个。

您可以在他们的演示页面或jsfiddle 上的演示副本上对此进行测试：只需将鼠标悬停在最后一项上以使其展开，然后将鼠标快速移动到第一项，然后传递第三项和第二项。最终结果是第三个项目是打开的，尽管您的鼠标在第一个项目上。（你也可以反过来做，但最容易从下到上复制问题）

如何防止这种行为发生，以便打开的最后一个项目是鼠标经过的项目，而不是鼠标经过的第一个项目？

4

1 回答 1

1

jQuery UI 已经实现了hoverIntent手风琴选择的功能，以解决动画队列问题。他们使用的代码片段如下->

//on DOM ready
$(function() {
    $("#accordion").accordion({
    event: "click hoverintent"
);
});

var cfg = ($.hoverintent = {
sensitivity: 7,
interval: 100
});

$.event.special.hoverintent = {
setup: function() {
    $( this ).bind( "mouseover", jQuery.event.special.hoverintent.handler );
},
    teardown: function() {
    $( this ).unbind( "mouseover", jQuery.event.special.hoverintent.handler );
    },
    handler: function( event ) {
        var self = this,
    args = arguments,
    target = $( event.target ),
    cX, cY, pX, pY;

    function track( event ) {
        cX = event.pageX;
        cY = event.pageY;
    };
    pX = event.pageX;
    pY = event.pageY;
    function clear() {
        target
                    .unbind( "mousemove", track )
        .unbind( "mouseout", arguments.callee );
        clearTimeout( timeout );
    }
    function handler() {
        if ( ( Math.abs( pX - cX ) + Math.abs( pY - cY ) ) < cfg.sensitivity ) {
        clear();
        event.type = "hoverintent";
        // prevent accessing the original event since the new event
        // is fired asynchronously and the old event is no longer
        // usable (#6028)
        event.originalEvent = {};
        jQuery.event.handle.apply( self, args );
        } else {
        pX = cX;
        pY = cY;
        timeout = setTimeout( handler, cfg.interval );
        }
    }
    var timeout = setTimeout( handler, cfg.interval );
    target.mousemove( track ).mouseout( clear );
    return true;
    }
};
于 2012-09-28T17:15:22.237 回答