Question

我正在使用jquery-ui accordion打开关于鼠标悬停而不是点击的部分，但是我注意到如果你快速鼠标悬停在多个项目上，被选中的项目是你的鼠标的第一个项目结束，而不是最后一次。

您可以在their demo page或this copy of the demo on jsfiddle上对此进行测试：只需将鼠标悬停在最后一项上，使其展开，然后将鼠标快速移至第一项，同时传递第3项和第2项走。最终结果是第3项打开，尽管您的鼠标在第一项上。（你也可以反过来做，但最容易复制从下到上的问题）

如何防止此行为发生，因此打开的最终项目是鼠标结束的项目，而不是鼠标移过的第一项？

Answer 1

jQuery UI为其手风琴选择实现了hoverIntent功能，以对抗动画队列问题。他们使用的片段如下 - ＆gt;

//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;
    }
};

如何防止jQuery-UI手风琴在鼠标上选择错误的项目？

1 个答案: