30

I have 2 events, one to detect window resize and other to detect the resizable stop of div.

But when I resize the div, in the console detect the window resize event.

Is there any way to block this?

$(document).ready(function(){
     $(window).bind('resize', function(){
        console.log("resize");    
     }); 
     $(".a").resizable();
 });

Example: http://jsfiddle.net/qwjDz/1/

Bjorn
  • 69,215
  • 39
  • 136
  • 164
ilslabs
  • 301
  • 1
  • 3
  • 3

5 Answers5

30

All of these answers are not going to help. The issue is that resize event bubbles up to the window. So eventually the e.target will be the window even if the resize happened on the div. So the real answer is to simply stop propagating the resize event:

$("#mydiv").resizable().on('resize', function (e) {
    e.stopPropagation(); 
});
Bjorn
  • 69,215
  • 39
  • 136
  • 164
  • 4
    This is the best way to go (hacking with target or even clientX would just cause problems). – suda Feb 01 '13 at 16:10
24

You see this behavior because of event bubbling. One workaround: check the source of the event in the callback using event.target:

$(window).bind('resize', function(event) {
    if (!$(event.target).hasClass('ui-resizable')) {
        console.log("resize");
    }
});

Demo: http://jsfiddle.net/mattball/HEfM9/

Another solution is to add a resize handler to the resizable and stop the event's propagation up the DOM tree (that's the "bubbling"). (Edit: this should work, but for some reason does not: http://jsfiddle.net/mattball/5DtdY.)

Matt Ball
  • 354,903
  • 100
  • 647
  • 710
  • Thanks! This started after upgrading to jQueryUI 1.6 (from 1.5) and I had no idea what was wrong. Now I'm filtering the resize events like above and it works. – BastiBen Dec 10 '11 at 11:09
  • @Matt Ball - the event.target element is not the element itself, but the resize handlers (at least in version 1.8). So it would be better to either compare the class name to **ui-resizable-handle** or compare the event.target to the window element itself. – Mohoch Apr 28 '13 at 14:56
  • also ok to check if target has getAttribute method, which is for DOM elements objects only, like this https://gist.github.com/beshur/8781777 – Alex Buznik Feb 03 '14 at 10:41
6

I think that actually the safest would be to do the following:

$(window).bind('resize', function(event) {
    if (this == event.target) {
        console.log("resize");
    }
});
zaoudis
  • 110
  • 3
  • 10
  • 1
    This doesn't work for me in IE8, where `event.target` is the same as `window`. A solution that works for me is checking for the presence of mouse coordinates: if `event.clientX` is defined, it is a jQuery resizable event. If `event.clientX` is not defined, it is a "true" window resize. – Blaise Apr 25 '12 at 15:08
4

For me, with JQuery 1.7.2 none of the solution proposed here worked. So I had to come up with a slightly different one that works on older IE browsers as well as Chrome...

$(window).bind('resize', function(event) {
    if ($(event.target).prop("tagName") == "DIV") {return;}  // tag causing event is a div (i.e not the window)
    console.log("resize");
});

This might have to be adapted if the element resized is something else than a <div>

Johann
  • 12,158
  • 11
  • 62
  • 89
4
$(window).resize(function(e) {
  if (e.target == window)
    /* do your stuff here */;
});

http://bugs.jqueryui.com/ticket/7514

Cristi Pufu
  • 9,002
  • 3
  • 37
  • 43