Javascript jQuery对话框大小调整问题

我有一个jQuery对话框，当您释放鼠标时，它有时不会停止调整大小。如果这样做，您必须再次单击div的边缘以停止调整大小，否则它将跟随鼠标在屏幕上移动。我已经查阅了stackoverflow这个解决方案，将事件处理程序绑定到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;

}

函数显示对话框（div，src）{
$（div.html（“”）；
$（div）.对话框({
莫代尔：是的，
身高：750，
宽度：1050，
最小宽度：561，
位置：[‘顶部’，20]，
可调整大小：正确，
开始：功能（事件、用户界面）{
activatePortlet（jQuery（this.attr（“id”））；
var o=$（this）.data（'draggable'）。选项；
jQuery（“iframe”）。每个（函数（）{
jQuery（“”）
.css({
宽度：this.offsetWidth+“px”，高度：this.offsetHeight+“px”，
位置：“绝对”，不透明度：“0.001”，zIndex:1000
})
.css（jQuery（this）.offset（））
.附于（“主体”）；
});
},
停止：功能（事件、用户界面）{
jQuery（“div.ui-resizeable-iframeFix”）.each（函数（）{this.parentNode.removeChild（this）；}）；//删除框架帮助程序
}
});
$（“div”）.bind（“resizestop”，函数（事件，用户界面）{
警报（“已停止调整大小”）；
});
返回false；
}

我认为导致您出现问题的原因是，松开鼠标按钮时，光标需要实际位于对话框上

在人眼看来似乎是这样的，但如果您快速移动鼠标，您可以看到对话框随着光标的移动而延迟调整大小。
通常，在再次释放鼠标按钮之前，对话框会及时恢复，但如果移动得稍快，并且在仍在调整大小时释放按钮，则光标在释放时不在对话框上，因此不会触发停止调整大小的事件（因为该事件已附加到对话框）

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

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

  ）
  如果它也能与

  $（div.on（'resizestart'，function（）{…}

  ，您可以尝试一下。我无法测试它

• 我希望

  $（div）.trigger（'resizestop'）；

  可以工作，我也无法测试，而且我似乎找不到关于该事件的可靠文档，当它触发时以及在哪些元素上。但是既然您声明当您再次单击时它会触发，我想您也应该能够将其与

  .trigger（）

  一起使用
  （如果这不起作用，请告诉我，我将尝试为最后一步找到另一个解决方案）

---

这里有一个代码片段：

$（'dialogID'）。在（'mousedown'，function（）上{
$（this.addClass（'resizing'）；
$（this.html（$（this.attr（'class'））；//仅用于测试
});
$（document）.on（'mouseup'，function（）{
if（$（'#dialogID'）.hasClass（'调整大小'））{
$（'#dialogID'）.removeClass（'调整大小'）；
//$（'#dialogID'）。触发器（'resizestop'）；
$（'dialogID'）.html（$（'dialogID'）.attr（'class'）；//仅用于测试
}
})；

#dialogID{宽度：100px；高度：100px；背景：蓝色；}

我想我可以帮你，但是你能帮我做个工作让我试试吗？@myfunkyside不幸的是，我没有，我只是尝试了一下，但是页面上有太多动态创建的内容，无法在JSFIDLE中复制（这是购物车结账）所以我用我的代码替换了你的代码，但它仍然在发生。不过，关于问题的原因，你是对的，如果我拖得很慢，它就会正常工作。@user3267755-你能把

console.logs

放在事件处理程序中吗，就像这个fiddle:jsfiddle.net/8tgn8ore/1一样，并检查这两个事件处理程序是否都是以e的形式执行的吗expected？（还要检查mousedown和mouseup上是否真的添加和删除了调整大小的

类，即使对话框在调整大小时卡住了。）如果是这样的话，那么我们所要做的就是找到一些东西来替换它：
$（div）。trigger（'resizestop'）；
@user3267755-您可以尝试替换
$（div）。trigger（'resizestop'）；
与
$（div.trigger（'click'）；
，因为您说必须再次单击以停止调整大小（尽管如果必须真的单击边缘，这可能不起作用，但尝试并没有坏处）@user3267755-运气好吗？嗨，很抱歉耽搁了你，谢谢你回来检查。幸运的是，客户同意调整大小不是什么大问题，所以我们将禁用它。我认为这是一个很好的例子，一个对话框做了太多的事情，并将其变成一把瑞士军刀。在这个iFrame中使用了太多的内容和代码，以至于它的大小调整得不够快，无法跟上鼠标的速度。我将接受你的答案，因为即使代码不起作用，你仍然正确地指出了问题的原因，这比我得到的要远。