0

Web ページを上から少し下にスクロールしないと、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 で問題を再現するには、右下の結果パネルを右クリックします。[このフレーム] -> [このフレームのみを表示] を選択します (スクロール バーを表示するには、ブラウザ ウィンドウのサイズを縮小する必要がある場合があります)。他のブラウザについてはわかりません。

パネルの 1 つをダブルクリックしても、スクロール バーがページの上部より少し下にある場合にのみダイアログが起動することがわかります。これは、説明して再現するのが奇妙な問題でした。

4

1 に答える 1

1

でさらに調査した後、selectable()私はこのSOの記事に出くわしました。それをあなたのフィドルと 組み合わせたところ、うまくいきました。すべてを 1 つにまとめたことに注意してくださいdocument.ready()。

documentationによると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 に答える