解决在调整大小后取消点击的问题-AddressingClickCancellationAfterResizing

6  

这是一个很好的问题。Resizable组件通过事件冒泡机制工作，即实际的调整手柄是可调整元素的内部子元素。因此，可以通过检查事件目标的类来解决这个问题。

例如，可以在点击事件处理器中添加如下代码，判断点击的目标是否为调整手柄，如果不是则切换元素的选中状态：

$('#test').click(function(e){
    if(!$(e.target).is('.ui-resizable-handle')) // 如果不是调整手柄
        $(this).toggleClass('selected');
}).resizable();

0  

另一种方法是从一开始就将所有div设置为可调整大小，并在点击时通过改变样式来管理选中状态：

$(function() {
    var resizables = $('#site div');
    resizables.resizable({
           start: function(event, ui) {
                console.log("Start");
                // 首先移除其他所有div的选中状态
                resizables.each(function(){ $(this).removeClass('selected'); });
                // 设置当前div为选中状态
                ui.element.addClass('selected');
                // 继续执行其他操作
           },
           resize: function(event, ui) {
                console.log("Resize");
           },
           stop: function(event, ui) {
                console.log("Stop");
           }
    });
});

0  

jQuery的.one()方法也是一个不错的选择！它允许对具有特定类的每个元素仅响应一次点击事件。

$(".foo").one("click", function() {
  alert("该消息只会显示一次。");
});