Question

我在stackoverflow（jsfiddle）找到了这个漂亮的分割器。因为所有尺寸都以像素为单位设置，所以响应不是很快。所以我将它们改为百分比（jsfiddle）。现在，如果您移动拆分器，然后尝试更改窗口大小，它仍然会断开。

为了解决这个问题，我尝试在窗口对象上添加一个监听器

$(window).on('resize', function () {
    /* reset width of both elements to percentages */
});

jsfiddle

只有在窗口大小发生变化时才会触发此代码。不幸的是，当jquery-ui触发＆＃39; resize＆＃39;事件。有什么建议如何在jquery-ui触发时阻止该事件的传播？

如果已经有响应分离器，请告诉我！

Answer 1

为了仅在窗口调整大小时触发代码，您可以尝试使用e.target。

演示：http://jsfiddle.net/lotusgodkk/8qzTJ/740/

$(function () {
var el1, el2;

$(".resizable1").resizable({
    handles: 'e',
    minWidth: '50',
    resize: function (event) {
        var remainingSpace = $(this).parent().width() - $(this).outerWidth(),
            divTwo = $(this).next(),
            divTwoWidth = remainingSpace - (divTwo.outerWidth() - divTwo.width());
        divTwo.width(divTwoWidth);
        el1 = $(this);
        el2 = divTwo;

        event.stopPropagation();
        //event.preventDefault();
        return false;
    }
});

$(window).on('resize', function (e) {
    console.log($(e.target).hasClass('ui-resizable'));
    if (!$(e.target).hasClass('ui-resizable')) {//Check whether the target has class "ui-resizable".
        console.log('window');
        if (el1 && el2) {
            el1.width('50%');
            el2.width('50%');
        }
    }
 });
});

在执行resize函数之前，我正在检查目标是否具有类＆＃34; ui-resizable＆＃34;。 jQuery添加了一个类＆＃34; ui-resizable＆＃34;关于绑定元素。希望这会有所帮助。

jquery ui：resize也会在`window`上触发调整大小

1 个答案: