Question

我有一个jQuery对话框，有时在你释放鼠标时不会停止调整大小。如果这样做，您必须再次单击div的边缘以停止调整大小，否则它将跟随您的鼠标在屏幕上。我已经查看了stackoverflow这个解决方案，将事件处理程序绑定到resizestop事件并将其添加到我的对话框代码中，但是如果再次单击它，它就不会触发，如果它没有停止调整鼠标大小。

$("div").bind("resizestop", function(event, ui) {
    alert('stopped resizing');
});

对话框代码：

function showDialog(div, src) {
    $(div).html('<IFRAME id="orderframe" name="orderframe" frameBorder=0 width="100%" height="100%" style="overflow-x: hidden; overflow-y: scroll;" src="' + src + '"></IFRAME>');
    $(div).dialog({
        modal: true,
        height: 750,
        width: 1050,
        minWidth: 561,
        position: ['top', 20],
        resizable: true,
        start: function (event, ui) {
            activatePortlet(jQuery(this).attr("id"));
            var o = $(this).data('draggable').options;
            jQuery("iframe").each(function () {
                jQuery('<div class="ui-resizable-iframeFix" style="background: #fff;"></div>')
     .css({
         width: this.offsetWidth + "px", height: this.offsetHeight + "px",
         position: "absolute", opacity: "0.001", zIndex: 1000
     })
     .css(jQuery(this).offset())
     .appendTo("body");
            });
        },
        stop: function (event, ui) {
            jQuery("div.ui-resizable-iframeFix").each(function () { this.parentNode.removeChild(this); }); //Remove frame helpers
        }
    });

    $("div").bind("resizestop", function (event, ui) {
        alert('stopped resizing');
    });

    return false;

}

Answer 1

我认为导致您的问题的是，当释放鼠标按钮时，光标需要实际 on 对话框。

对于人眼来说，似乎就是这种情况，但是如果你快速移动鼠标，你可以看到光标后面的对话框调整的滞后。
通常，在再次释放鼠标按钮之前，对话框会及时赶上，但是如果您移动一点并且在仍然调整大小时释放按钮，则光标在释放时不会出现在对话框上，因此没有触发调整大小的事件（因为它附加到对话框中）。

要解决此问题，请使用以下两个函数替换resizestop函数：

$(div).on('mousedown',function(){
    $(this).addClass('resizing');
});
$(document).on('mouseup',function(){
    if ($(div).hasClass('resizing')) {
        $(div).removeClass('resizing');
        $(div).trigger('resizestop');
    }
});

这会捕获mousedown（提供的var div）上的div事件，但是它全局捕获mouseup事件。因此，即使在释放按钮时鼠标不在对话框上，事件仍会触发。（由于使用了全局事件，您需要让班级检查mouseup是否来自mousedown上的div。）
如果它也适用于$(div).on('resizestart',function(){...}，您可以尝试。我无法测试。
我希望$(div).trigger('resizestop');有效，我也无法测试，而且我无法找到关于该事件的可靠文档，当它触发时，以及哪些元素。但是，既然你说当你再次点击时它会触发，我认为你也应该能够使用它.trigger()。
（如果这不起作用，请告诉我，我会尝试为最后一步找到另一种解决方案）。

以下是代码段：

＆＃13;

$('#dialogID').on('mousedown',function(){
  $(this).addClass('resizing');
  $(this).html($(this).attr('class')); //FOR TESTING ONLY
});
$(document).on('mouseup',function(){
  if ($('#dialogID').hasClass('resizing')) {
    $('#dialogID').removeClass('resizing');
    //$('#dialogID').trigger('resizestop');
    $('#dialogID').html($('#dialogID').attr('class')); //FOR TESTING ONLY
  }
});

＆＃13;

#dialogID {width:100px; height:100px; background:blue;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="" id="dialogID" contenteditable="true"></div>

＆＃13;

＆＃13; （ 小提琴：http://jsfiddle.net/8tgn8ore/2/ ）

此代码段并不能证明它适用于您的代码，因为正如您所说，将代码转换为工作示例太难了。
它实际上只添加和删除了类，但它证明了全局mouseup的使用是有效的，我认为这是解决问题的关键。

jQuery对话框调整大小问题

1 个答案: