简体   繁体   English

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

[英]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. 我有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/

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. 所以最终e.target将成为窗口,即使调整大小发生在div上。 So the real answer is to simply stop propagating the resize event: 所以真正的答案是简单地停止传播resize事件:

$("#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 : 一种解决方法:使用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 resize handler to the resizable and stop the event's propagation up the DOM tree (that's the "bubbling"). 另一个解决方案是向resizable添加一个resize处理程序,并停止事件在DOM树上的传播(即“冒泡”)。 ( Edit: this should work, but for some reason does not: http://jsfiddle.net/mattball/5DtdY .) 编辑:这应该有效,但出于某种原因不行: 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. 对我来说,使用JQuery 1.7.2,这里提出的解决方案都没有。 So I had to come up with a slightly different one that works on older IE browsers as well as Chrome... 所以我不得不提出一个稍微不同的适用于较旧的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>则可能必须调整它

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

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM