javascript jQuery UI 可调整大小的火窗调整大小事件

jQuery UI resizable fire window resize event

提问by ilslabs

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

我有 2 个事件，一个用于检测窗口调整大小，另一个用于检测 div 的可调整大小的停止。

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

但是当我调整 div 的大小时，在控制台中检测到窗口调整大小事件。

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/

示例：http: //jsfiddle.net/qwjDz/1/

回答by Bjorn

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:

所有这些答案都无济于事。问题是调整大小事件冒泡到窗口。所以最终 e.target 将是窗口，即使调整大小发生在 div 上。所以真正的答案是简单地停止传播调整大小事件：

$("#mydiv").resizable().on('resize', function (e) {
    e.stopPropagation(); 
});

回答by Matt Ball

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

由于事件冒泡，您会看到这种行为。一种解决方法：使用以下命令检查回调中的事件源event.target：

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

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

演示：http: //jsfiddle.net/mattball/HEfM9/

---

---

Another solution is to add a resizehandler 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.)

另一种解决方案是向resize可调整大小的对象添加一个处理程序并停止事件在 DOM 树中的传播（即“冒泡”）。（编辑：这应该有效，但由于某种原因不起作用：http: //jsfiddle.net/mattball/5DtdY。）

回答by zaoudis

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

我认为实际上最安全的是执行以下操作：

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

回答by Johann

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

对我来说，使用 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");
});

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

如果调整大小的元素不是一个 <div>

回答by Cristi Pufu

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

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

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