0

除非网页从顶部向下滚动少量，否则 jQuery UI 'dblclick' 事件将无法触发。向下滚动允许触发事件，但滚动回页面顶部会重新引入问题。

<!DOCTYPE HTML>
<html>
<head>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
    <style>
        #selectableTiles .ui-selected
        {
            background: black;
            color: white;
        }

        #selectableTiles
        {
            list-style-type: none;
            margin: 50 auto;
            padding: 0;
        }

        #selectableTiles li
        {
            margin: 5px;
            padding: 5px;
            float: left;
            width: 150px;
            height: 150px;
            text-align: center;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
</head>
<body>
    <div id="dialog-confirm" title="">
        <p style="text-align:center; margin-left: 10px; margin-right: 10px">
            You must have scrolled down.
        </p>
    </div>
    <ul id="selectableTiles">
        <li class="ui-state-default">1</li>
        <li class="ui-state-default">2</li>
        <li class="ui-state-default">3</li>
        <li class="ui-state-default">4</li>
        <li class="ui-state-default">5</li>
        <li class="ui-state-default">6</li>
        <li class="ui-state-default">7</li>
        <li class="ui-state-default">8</li>
        <li class="ui-state-default">9</li>
        <li class="ui-state-default">10</li>
    </ul>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#selectableTiles").selectable();
        });
        $("#dialog-confirm").dialog({
            autoOpen: false,
            resizable: false
            modal: true,
            buttons: {
                OK: function () {
                    $(this).dialog("close");
                }
            }
        });
        $(".ui-state-default").dblclick(function (event) {
            $("#dialog-confirm").dialog("option", "title", event.target.textContent);
            $("#dialog-confirm").dialog("open");
        });
    </script>
    <p class="clear">
    </p>
</body>
</html>

http://jsfiddle.net/NbYDH/

上面的 JSFiddle 页面在 IE 中重新创建了该问题。要重新创建 Firefox 的问题，请右键单击右下角的结果面板。选择'This Frame' -> 'Show Only This Frame'（您可能必须缩小浏览器窗口的大小以引入滚动条）。我不知道其他浏览器。

您会发现，如果滚动条略低于页面顶部，则双击其中一个面板只会启动一个对话框。这是一个描述和重现的奇怪问题。

4

1 回答 1

1

在对我进行了一些调查后，selectable()我遇到了这篇 SO 文章 ，我将它与你的小提琴结合起来，它就可以工作了。请注意，我将所有内容都放在一个document.ready().

根据文档，cancel如果您从与选择器匹配的元素开始，则会阻止选择。但是，它需要另一个click事件处理程序才能再次取消选择这些东西。

在适合您情况的代码下方

$("#selectableTiles").selectable(
    {cancel: '.ui-selected'}
);
$(document).on('click','.ui-selected',function() {
   $(this)
    .removeClass('ui-selected')
    .trigger('selectablestop');
});
于 2012-10-23T19:04:59.147 回答