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/
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();
});
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.)
I think that actually the safest would be to do the following:
$(window).bind('resize', function(event) {
if (this == event.target) {
console.log("resize");
}
});
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>
$(window).resize(function(e) {
if (e.target == window)
/* do your stuff here */;
});
http://bugs.jqueryui.com/ticket/7514