jQuery UI对话框和滚动块争夺鼠标

Question

我真的不确定如何正确地称呼这个问题

让我指出一个例子

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

的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);} 

Answer 1

好吧，我想我可能已经解决了基本问题

问题是这个。 内容的目录将插入到对话框的标题，默认情况下，该对话框的jquery-ui定位要移动的区域。 我不完全确定这是怎么引起问题的，但是将菜单#helpTOC移到对话框前面#helpTOC问题消失。

更新小提琴-> http://jsfiddle.net/Hax8K/

我想花时间写一个问题可以让我的大脑思考一下。 我仍欢迎对原始问题或如何选择解决问题的答案或解释。