Javascript jquery ui对话框和滚动块争夺鼠标

我真的不知道如何恰当地命名这个问题

让我指出一个例子

问题是，当对话框打开时，单击目录并开始滚动，对话框就会卡住，并用鼠标移动。至少在chromium和firefox中。当我滚动目录时，有没有关于如何释放鼠标的想法

HTML

---

​

好的，我想我可能已经解决了根本问题

问题是这个。内容的目录插入到对话框的标题中，默认情况下，jqueryui以要移动的区域为目标。我不完全确定这是如何导致问题的，但将菜单

#helpTOC

前置移动到对话框会导致问题消失

更新的小提琴->

---

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

您在正确标记问题和提供所有所需信息方面做得非常好，不幸的是，我无法复制您的问题。你在用什么操作系统？Ubuntu。我稍微松了一口气，这可能是操作系统的问题。轻微地或者，我在解释我的问题时真的做得很差吗？你是在幽默吗？不，我不是在讽刺或幽默。没有多少人知道如何显示相关代码、创建小提琴和使用适当的标题。你做了所有这些，看起来不错。我也不完全确定，我需要另一个人来确认或否认他们是否也得到了这个问题。@matchew，为你的问题选择标签时请小心。您根据输入错误为Javascript和jQuery创建了两个新标记。

<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>​

$(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;
    });
});​

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