У меня есть 2 события, один для определения размера окна и другого для обнаружения изменяемой размерной остановки div.
Но когда я изменяю размер div, в консоли обнаруживается событие изменения размера окна.
Есть ли способ заблокировать это?
$(document).ready(function(){
$(window).bind('resize', function(){
console.log("resize");
});
$(".a").resizable();
});
Пример: http://jsfiddle.net/qwjDz/1/
Все эти ответы не помогут. Проблема в том, что пузырьки изменения размера до окна. Таким образом, в конце концов, e.target будет окном, даже если изменение размера произошло на div. Таким образом, реальный ответ состоит в том, чтобы просто прекратить распространение события изменения размера:
$("#mydiv").resizable().on('resize', function (e) {
e.stopPropagation();
});
Вы видите это поведение из-за пузырьков событий. Один обходной путь: проверьте источник события в обратном вызове, используя event.target:
$(window).bind('resize', function(event) {
if (!$(event.target).hasClass('ui-resizable')) {
console.log("resize");
}
});
Демо: http://jsfiddle.net/mattball/HEfM9/
Другим решением является добавление обработчика (Edit: это должно работать, но для некоторых Причина не такова: http://jsfiddle.net/mattball/5DtdY.)resize к изменяемому размеру и остановке распространения события в дереве DOM (что "пузырь" ).
Я думаю, что на самом деле самым безопасным было бы сделать следующее:
$(window).bind('resize', function(event) {
if (this == event.target) {
console.log("resize");
}
});
$(window).resize(function(e) {
if (e.target == window)
/* do your stuff here */;
});
Для меня, с JQuery 1.7.2, ни одно из предложенных здесь решений не работало. Поэтому мне пришлось придумать немного другое, которое работает в более старых браузерах IE, а также в 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");
});
Это может потребоваться адаптировать, если размер элемента был чем-то иным, чем <div>