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/

我想花時間寫一個問題可以讓我的大腦思考一下。 我仍歡迎對原始問題或如何選擇解決問題的答案或解釋。