jQuery UI resizable fire window resize event

问题

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/

回答1:

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

回答2:

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.)

回答3:

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

$(window).bind('resize', function(event) {
    if (this == event.target) {
        console.log("resize");
    }
});

回答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>

回答5:

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

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

来源：https://stackoverflow.com/questions/7494378/jquery-ui-resizable-fire-window-resize-event

标签

javascript

jquery

resize

resizable