Jquery UI嵌套的可选问题答案

【问题标题】：Jquery UI nested Selectable issueJquery UI嵌套的可选问题
【发布时间】：2011-06-01 20:42:21
【问题描述】：

我需要在运行时单击按钮时水平和垂直创建/拆分我的 div 元素。我可以创建一个 div 容器，根据单击的按钮在其中拆分画布。

例如：当我单击 HorizontalSplit 按钮时，它应该在所选容器内创建两个新的 div。我遇到了嵌套子 div 元素的问题。当我试图选择最里面的子代码时，也选择了父 div，这也造成了问题。我无法弄清楚为什么我的 nonSelectable 类会自动获得“ui-selected”

这是我到目前为止所做的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
                <link rel="stylesheet" href="css/themes/base/jquery.ui.all.css"> 
                <script type="text/javascript" src="scripts/jquery-1.6.js"></script>
                <script type="text/javascript" src="scripts/jquery-ui-1.8.13.custom.min.js" ></script>              
                    <style>

                        #canvasWrapper {
                            border: 1px solid #DDDDDD;
                            height: 500px;
                            vertical-align:top;
                            margin-left: auto;
                            margin-right: auto;
                            width:  90%; 
                        }
                        .Frame {
                            border: 1px solid #DDDDDD;
                            height: 500px;
                            margin-left: auto;
                            margin-right: auto;
                            width:  100%; 
                        }
                        .hFrame {
                            border: 1px solid #DDDDDD;
                            height: 50%;
                            width:  100%; 
                            position:relative;
                        }

                        .nonSelectable {
                            border: 1px solid #DDDDDD;
                            height: 50%;
                            width:  100%; 
                            position:relative;
                        }

                        .vFrame {
                            border: 1px solid #DDDDDD;
                            height: 100%;
                            width: 50%; 
                            position:relative;
                        }

                        .buttonBar {
                            position: relative;
                            margin-left: auto;
                            margin-right: auto;
                            width:90%;
                        }
                        .Frame .ui-selecting,.vFrame .ui-selecting ,.hFrame .ui-selecting  { background: blue; }
                        .Frame .ui-selected,.vFrame .ui-selected ,.hFrame .ui-selected  { background: grey; }
                        .hFrame ui-selectable { background: yellow; }
                        .hFrame ui-selected { background: green; }
                        .hFrame ui-selectable ui-selected { background: pink; }

                    </style>



</head>
<body>
    <div id="canvasWrapper">
        <div id="canvasFrame" class="Frame">
        </div>
    </div>
    <div class="buttonBar">
        <input id="B1" class="button" type="submit" value="Horizontal Split">
        <input id="B2" class="button" type="submit" value="Vertical Split">
    </div>

    <script>
        $(document).ready(function()
        {   
            $("#canvasFrame").addClass("ui-selected");
            $(function() {
                $( ".Frame" ).selectable({
                     // cancel: '.nonSelectable'
                });
                $( ".hFrame" ).selectable({
                    // cancel: '.nonSelectable'

                });
                $( ".vFrame" ).selectable();
                // $( ".nonSelectable" ).selectable("disable");
            });

            addHFrame();

            addVFrame();



        });

    function addHFrame(){
        $("#B1").unbind('click.addit').bind('click.addit',function()
        {

        var numSplits=2;
        var select="";

        $(".ui-selected ").each(function () {   
                for (var i=0; i<numSplits ; i++){
                        $(this).removeClass('ui-selected ui-selectable');
                        $(this).parent().removeClass('ui-selected ui-selectable');
                        var $newElement = '<div></div>';

                        $(this).append($newElement);
                        $(this).children().addClass("hFrame");

                        //$(this).unbind('ui-selected ui-selectable');
                        // $(this).parent().selectable("disable")   ;
                        // $(this).remove("hFrame").addClass("nonSelectable")   ;
                        addHFrame();
                    }
                $(this).hasClass("hFrame") ? $(this).removeClass("hFrame").addClass("nonSelectable") : $(this);                         
            });
        });

    }

    function addVFrame(){

                $("#B2").click(function()
                {

                    $("div.ui-selected").each(function () {
                        // $(this).append('<div class="vFrame"> </div>');       
                        alert("Button Vertical Split Clicked"); 
                    });
                });
    }

    </script>
</body>

</html>

【问题讨论】：

标签： jquery css jquery-ui

【解决方案1】：

听起来您需要防止事件传播： http://api.jquery.com/event.stopPropagation/

类似问题：jQuery UI Sortable -- How can I cancel the click event on an item that's dragged/sorted?

当点击元素时，事件会在 DOM 中冒泡，直到它到达最高级别的 HTML 节点。这称为事件传播。因此，除非事件传播停止，否则该事件会在所有元素的祖先上触发。可以这样做：

HTML-

<body>
    <div id="container">
        <a href="javascript:void(0);" id="click-element"></a>
    </div>
</body>

脚本-

$('#click-element').click(function(event){

    //prevent container and body from triggering click event
    event.stopPropagation();

    //do stuff

});

【讨论】：

你能详细说明一下吗....我是 jquery 的新手...我尝试了 stopPropagation 但没有成功。

【解决方案2】：

我尝试了建议的解决方案，并且部分可行。

但是 如果容器是可选择的，如何通过鼠标选择项目的方式有所不同。

如果 容器不可选择 - 一切正常。如果容器是可选的 - 您必须点击项目并进行小拖动，只需几个像素。

没有指定距离，所以我的期望是它应该以相同的方式工作。我什至尝试调试jQuery，但没有找到解决方案。

有什么想法吗？

【讨论】：

【解决方案3】：

我知道这并没有为您的问题提供技术解决方案，但它是一个比解决方案更容易的答案。停止使用 .selectable。 .selectable 是提供点击功能的助手，在这一点上，没有它做你想做的事情比重新配置更容易。使用带有过滤器的点击并添加一些事件传播覆盖以返回可选样式功能：

$('#canvas').on('click', '.control', function (event) {
    var ui = $(this);
    $('#canvas .control').removeClass('ui-selected');
    ui.addClass('ui-selected');

    -- do stuff --

    event.stopPropagation();
    event.preventDefault();
});

检测点击关闭：

$('#canvas').on('click', function () {
    $('#canvas .control').removeClass('ui-selected');

    -- Do Stuff when not selected --
});

由于 event.stopPropagation() 在选择 .control 时不会触发。

【讨论】：