Изменение размера элемента приводит к событию изменения размера окна

Question

Похоже, что при изменении размера элемента HTML происходит событие обрезания окон.

Поскольку я хочу выполнить другую логику при изменении размера элементов и когда окно будет изменено, существует ли не хакерский способ справиться с этим?

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

Другими словами, проблема заключается в том, что при изменении размера элемента, событие изменения размера увольняют за все это родители, даже если их размер не меняется

Answer 1

Основание на другой информации Я думаю, что это отражает поведение окна.

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

Edit: альтернативная и "более элегантное" решение

Хотя выше решение работает безупречно, я не был удовлетворен того, чтобы управлять вне изменяемыми() виджета. И этого не должно быть. После копания немного глубже, можно остановить распространение в фазе «создать». Чтобы показать это решение, я добавляю его к предыдущему.

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

Answer 2

Используйте е .TARGET:

SEE DEMO

$(window).on('resize', function(e){ 
     if(e.target===this)   
      $('#text').text(++resizes); 
    }); 

Answer 3

работает для меня Demo

if (e.originalEvent.type == 'resize'){ 
     $('#textWindow').text(++resizesWindow); 
    } else { 
     $('#text').text(++resizes); 
    } 

Answer 4

Accept e в качестве первого аргумента в вашей анонимной функции.

Это будет jQuery Event Object, с помощью которого вы можете остановить распространение события, используя e.stopPropagation (как предложил Даниэль в комментариях выше).

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

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

ППК имеет большое писать о Order Event объясняющей пропускании событий и захвата, который является то, что причиняет вам неприятности здесь. http://www.quirksmode.org/js/events_order.html

Answer 5

Согласно http://www.quirksmode.org/dom/events/resize.html событие изменения размеров доступны в окне, но не на документе или других элементов (если мы будем игнорировать некоторые исключения, упомянутые на этой странице).

Так это действительно неожиданный, что изменение ширины и/или высот некоторого элемента с помощью изменяемого() вызывает:
1) изменение размера события обжига при все
2) изменением размером события барботирования до оконного объекта

Если я хочу изменить только $ ('# elem'), это все, что я хочу. Не стрелять в пузырьки или окна.

Я сделал изменения одной строки к примеру скрипке (и обновлена ​​библиотеки немного более поздние версии):

http://jsfiddle.net/CPUwW/56/

// The following line is the needed change. widgetEventPrefix is 
// originally 'resize'. It have to be changed. 

$.ui.resizable.prototype.widgetEventPrefix = 'myresize'; 

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

EDIT: Проблема в других решениях на этой странице (и также here) заключается в том, что пузырь до окна и стрельба по событию изменения размера окна вызывает ненужные накладные расходы, если вы просто хотите изменить размер div или около того.

EDIT2: Потому что widgetEventPrefix является внутренним параметром, его имя может меняться, его можно удалить, и его поведение можно изменить в новых версиях пользовательского интерфейса jQuery. Поэтому при обновлении пользовательского интерфейса убедитесь, что это работает как раньше.

Answer 6

Это ошибка в jQuery core, но это может быть workarounded с проверкой целевого

$(window).resize(function(e) { 
if (e.target == window) 
/* do your stuff here */; 
}) 

Answer 7

Если вам просто нужно различать браузера изменения размеров и элементов изменения размера, вы можете проверить свойство «Bubbles» события (е):

$(window).resize(function(e) 
    { 
    if (!e.bubbles) 
     { 
     clearTimeout(resizeId); 
     resizeId = setTimeout(doneResizing, 250); 
     } 
    }); 

когда браузер изменяется, e.bubbles это значение False (потому что это объект верхнего уровня), но когда какой-либо элемент документа изменяется, e.bubbles будет True.

Я проверил это в Chrome ... с другими браузерами, YMMV.