Question

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重新创建问题，请右键单击右下角的“结果”面板。选择“此框架” - ＆gt; “仅显示此帧”（您可能需要缩小浏览器窗口的大小以引入滚动条）。我不了解其他浏览器。

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

Answer 1

使用selectable()进行了一些调查后，我遇到了this SO article 我将其与your fiddle结合起来并且有效。请注意，我将所有内容都放在一个document.ready()。

根据documentation，cancel会阻止选择是否开始匹配选择器的元素。但是，它需要anohter click事件处理程序来再次取消选择。

在适合您情况的代码下方

$("#selectableTiles").selectable(
    {cancel: '.ui-selected'}
);
$(document).on('click','.ui-selected',function() {
   $(this)
    .removeClass('ui-selected')
    .trigger('selectablestop');
});

如果没有在浏览器中向下滚动，jQuery UI事件不会触发

1 个答案: