我真的不确定如何正确命名这个问题

让我举一个例子 小提琴

问题是当对话框打开并且您单击目录并开始滚动时，对话框卡住并随着鼠标移动。至少在铬和火狐中。关于如何在滚动目录时释放鼠标的任何想法？

.HTML

<button id="opener">Clicky</button>
<div id="dialog"><h1>Title</h1>
    <p>Bacon ipsum dolor sit amet pork chop deserunt ut esse leberkas, shankle strip steak veniam adipisicing salami ball tip.</p>
 <p>    Duis ut exercitation, velit biltong chicken sed enim pork pastrami shank ut adipisicing. Drumstick ham hock irure sunt filet mignon fatback est chicken mollit venison ad capicola fugiat consequat short loin. Shoulder ea labore, minim pork chop beef tongue pork belly ullamco ex. Bacon tempor officia, strip steak in irure venison magna. Corned beef eiusmod pork belly pork loin laboris.</p>

    </div>​

JS/JQuery

$(function() {
    var menu = [];
        menu[0] = '<input type="checkbox" id="helpTOCButton" title="Table of Contents"/>';
        menu[1] = '<label for="helpTOCButton">Table of Contents</label>'
        menu[2] = '<div id="helpTOC">';
        menu[3] = '<a title="Bacon">Bacon</a>';
        menu[4] = '<a title="pork">Pork</a>';
        menu[5] = '<a title="Steak">Steak</a>';
        menu[6] = '<a title="Frequently Asked Questions">FAQ</a>';
        menu[7] = '<a title="chicken">Chicken</a>';
        menu[8] = '<a title="baby cows">veal</a>';
        menu[9] = '<a title="brisket">brisket</a>';
        menu[10]  = '<a title="what to do in case of heart attacks">change diet</a>';
        menu[10] = '</div>';            

    $( "#dialog" ).dialog({
        autoOpen: false,
        show: "blind",
        hide: "clip",
        height: '400',
        width: '500',
        title: menu.join(''),
        open: function() {
            $('#helpTOCButton')
                .button({icons: { secondary: 'ui-icon-triangle-1-s'}})
                .on('click',function() { 
                  $('#helpTOC').slideToggle()
                });   
        },
        close: function() { 
               $('#helpTOCButton').off('click');                    
        }
    });
    $( "#opener" ).click(function() {
        $( "#dialog" ).dialog( "open" );
        return false;
    });
});​

.CSS

h1 { font: bold 1.25em/1.7em Serif; } 
#helpTOC {background: #fcfcfc; box-shadow: 2px 2px 2px rgba(50,50,50,.2); display: none; position: absolute; margin-left: 5em; z-index:999; border: 1px solid #ccc; height: 5em;  width: 10em; overflow: auto; } 
#helpTOC a { font: .75em/1.25em sans-serif; display: block; cursor: pointer; padding: .25em; border-bottom: 1px solid #ccc; } 
#helpTOC a:hover { background-color: #ebebeb; box-shadow: 2px 2px 2px rgba(50,50,50,.1);} 

​