javascript - jQuery 对话框调整大小问题

Question

我有一个 jQuery 对话框，当您释放鼠标时，它有时不会停止调整大小。如果出现这种情况，您必须再次单击 div 的边缘才能停止调整大小，否则它将跟随您的鼠标在屏幕上移动。我已经在 stackoverflow 上查找了这个解决方案，将事件处理程序绑定(bind)到 resizestop 事件并将其添加到我的对话框代码中，但是直到您再次单击才触发，以防它不会停止在 mouseup 上调整大小。

$("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

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

对于人眼来说，情况似乎是这样，但如果您快速移动鼠标，您可以看到对话框随着光标调整大小的滞后。
通常，对话框会在再次释放鼠标按钮之前及时 catch ，但如果您移动得有点快，并且在仍在调整大小时释放按钮，则在释放时光标不在对话框上，因此停止调整大小的事件不会被触发(因为该事件附加到对话框中)。

要解决此问题，请将 resizestop-function 替换为以下两个函数:

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

• 这会捕获 div(提供的 var div)上的 mousedown 事件，但是
  它全局捕获 mouseup 事件。因此，即使当您释放按钮时鼠标不在对话框上，该事件仍然会触发。 (由于使用了全局事件，您需要该类来检查 mouseup 是否源自 div 上的 mousedown。)< br/>您可以尝试一下它是否也适用于 $(div).on('resizestart',function(){...}。我无法测试。

• 我希望 $(div).trigger('resizestop'); 有效，这个我也无法测试，而且我似乎找不到有关该事件的可靠文档，何时触发以及在什么元素上触发。但既然您说过再次单击时它会触发，我认为您也应该能够将它与 .trigger() 一起使用。
  (如果这不起作用，请告诉我，我会尝试为最后一步找到另一个解决方案)。

<小时/>

这是一个代码片段:

$('#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
  }
});

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

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

( fiddle :http://jsfiddle.net/8tgn8ore/2/ )

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