Question

我正在使用Jquery UI可调整大小的插件来调整各种div的大小。考虑以下HTML页面（嵌入了JS）：

<html>
<head></head>
<body>
<div id="site">
    <div>This element is resizable</div>
    <br />
    <div style="width: 200px;">This is another resizable element</div>
</div>

<!-- javascript includes -->
<script>
$(function() {
    $("#site div").click(function() {

        console.log("Clicked");    
        if($(this).hasClass("selected")) {
            $(this).removeClass("selected");
        }
        else {        // Currently not selected, so let's select it        
            $(this).addClass("selected").resizable({
                start: function(event, ui) {
                    console.log("Start");
                },
                resize: function(event, ui) {
                    console.log("Resize");
                },
                stop: function(event, ui) {
                    console.log("Stop");
                }
            });
        }
    });
});
</script>
</body>
</html>

所以，我在这个示例代码中想要完成的事情非常简单。当用户点击嵌套在“#site”中的div时，我希望div变为“已选中”。因此，在此示例中，当触发div的click事件时，名为“selected”的CSS类将添加到单击的div中。除了单击div之外，用户还可以调整div的大小。当用户调整所选div的大小时会出现问题。显然，当用户首次选择div时会触发click事件，但当用户单击并拖动div的边缘以调整其大小时，也会触发click事件。 click事件将调用click例程并取消选择div。这不是我想要发生的事情。只有在所有可调整大小的事件都被触发后才会触发click事件。

有了这个，我的问题是，如何处理这种情况以允许用户单击并选择div，还允许调整div的大小，但在拖动和调整div的大小时不取消选择？非常感谢您的帮助。提前谢谢。

Answer 1

好问题。可调整大小是利用事件冒泡。实际的调整大小句柄是可调整大小的内部元素。因此，检查事件目标的类将为您提供所需的信息。

http://jsfiddle.net/bmvDs/1/

$('#test').click(function(e){
    if(!$(e.target).is('.ui-resizable-handle')) // not if it is the handle
        $(this).toggleClass('selected');
}).resizable();

Answer 2

一个选项可能是将所有div设置为从一开始就可以调整大小并在点击时处理样式：

$(function() {
    var resizables = $('#site div');
    resizables.resizable({

               start: function(event, ui) {
                    console.log("Start");

                    // Remove the selected class from all other divs first
                    resizables.each(function(){ $(this).removeClass('selected'); });

                    // Set this div as selected
                    ui.element.addClass('selected');
                    // Carry on doing whatever else you want to do

               },
               resize: function(event, ui) {
                    console.log("Resize");
               },
               stop: function(event, ui) {
                    console.log("Stop");
               }

    });
});

Answer 3

jQuery .one是你的朋友！这将允许用类.foo。

单击每个元素

$(".foo").one("click", function() {
  alert("This will be displayed only once.");
});

如何在可调整大小的事件后取消点击？

3 个答案: