调整元素的大小会触发窗口的调整大小事件 [英] Resizing an element triggers the resize event of the window

问题描述

类似，当调整HTML元素的大小时，也会触发Windows的resize事件.

Looks like that when resizing an HTML element, the windows' resize event gets fired as well.

由于我想在调整元素大小和调整窗口大小时执行不同的逻辑，因此有没有一种处理这种错误的方法?

Since I want to execute different logic when resizing elements and when the window gets resized, is there a non-hackish way of dealing with this?

http://jsfiddle.net/CPUwW/1/

$(function(){
    $(window).on('resize', function(){        
          // This event gets fired when the #my_element div gets resized, event if
          // window doesn't get resized itself
          $('#text').text(++resizes);
    });

    $('#my_element').resizable();    
});

换句话说，问题在于，当我调整元素的大小时，即使其大小不变，其所有父对象都会触发resize事件

In other words, the problem is that when I resize an element, the resize event gets fired for all of it's parents even if their size doesn't change

推荐答案

基于其他信息，我认为这反映了窗口的行为.

Base on other information I think this one reflects the behavior of the window.

$(function () {
    var resizes = 0;

    $(window).on('resize', function () {
        $('#text').text(++resizes);
    });
    $('#my_element').resizable();

    $("#my_element").on('resize', function (e) {
        e.stopPropagation();
    });

});

http://jsfiddle.net/djwave28/CPUwW/7/

替代且更优雅"的解决方案

尽管上述解决方案完美无缺，但我对必须在resizable()小部件外部进行管理不满意.而且不一定如此.深入挖掘之后，可以在创建"阶段停止传播.为了显示该解决方案，我将其添加到了先前的解决方案中.

Although the above solution works flawless, I was not satisfied with having to manage outside the resizable() widget. And it does not have to be. After digging a little deeper, it is possible to stop the propagation within the "create" phase. To show this solution I am adding it to this previous one.

$(function () {
    var resizes = 0;

    $(window).on('resize', function () {
        $('#text').text(++resizes);
    });
    $('#my_element').resizable({
        create: function (event, ui) {
            $(this).parent().on('resize', function (e) {
                e.stopPropagation();
            });
        }
    });
});

更新小提琴: http://jsfiddle.net/djwave28/CPUwW /9/

这篇关于调整元素的大小会触发窗口的调整大小事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！