我有2个事件,一个用于检测窗口调整大小,另一个用于检测div的可调整大小的停止。
但是当我调整div的大小时,在控制台中检测窗口调整大小事件。
有没有办法阻止这个?
$(document).ready(function(){
$(window).bind('resize', function(){
console.log("resize");
});
$(".a").resizable();
});
答案 0 :(得分:25)
所有这些答案都无济于事。问题是调整大小事件会向窗口冒泡。所以最终e.target将成为窗口,即使调整大小发生在div上。所以真正的答案是简单地停止传播resize事件:
$("#mydiv").resizable().on('resize', function (e) {
e.stopPropagation();
});
答案 1 :(得分:22)
由于事件冒泡,您会看到此行为。一种解决方法:使用event.target
检查回调中的事件来源:
$(window).bind('resize', function(event) {
if (!$(event.target).hasClass('ui-resizable')) {
console.log("resize");
}
});
演示:http://jsfiddle.net/mattball/HEfM9/
另一个解决方案是向resizable添加一个(编辑:这应该有效,但由于某种原因不能:http://jsfiddle.net/mattball/5DtdY。)resize
处理程序,并停止事件在DOM树上的传播(即“冒泡”)。
答案 2 :(得分:6)
我认为最安全的做法是:
$(window).bind('resize', function(event) {
if (this == event.target) {
console.log("resize");
}
});
答案 3 :(得分:4)
对我来说,使用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>
答案 4 :(得分:4)
$(window).resize(function(e) {
if (e.target == window)
/* do your stuff here */;
});