jQueryのUIのサイズ変更可能なファイアウィンドウのサイズ変更イベント

Question

私は2つのイベント、1つのウィンドウのサイズを検出し、他のdivのサイズ変更可能な停止を検出する必要があります。

しかし、私はdivのサイズを変更すると、コンソールでウィンドウのサイズ変更イベントを検出します。

これをブロックする方法はありますか？

$(document).ready(function(){ 
    $(window).bind('resize', function(){ 
     console.log("resize");  
    }); 
    $(".a").resizable(); 
}); 

例：http://jsfiddle.net/qwjDz/1/あなたがあるため、イベントバブリングのこの振る舞いを見

Answer 1

。回避策の一つ：event.targetを使用して、コールバックでのイベントのソースを確認してください。

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

デモ：http://jsfiddle.net/mattball/HEfM9/

---

別の解決策は、サイズ変更可能にresizeハンドラを追加し、イベントの伝播を停止することですDOMツリー（「バブリング」）。（編集：これは動作しますが、何らかの理由でないはずです。http://jsfiddle.net/mattball/5DtdY）

Answer 2

私は実際に最も安全な、次の操作を実行するだろうと思う：

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

Answer 3

私にとっては、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>

Answer 4

以外の何かがある場合、これは適合させなければならないかもしれません

これらの回答はすべて役に立ちません。問題は、サイズ変更イベントがウィンドウまで泡立ちます。だから最終的にe.targetは、たとえサイズ変更がdivに起こったとしてもウィンドウになります。だから、本当の答えは、単純にサイズ変更イベントを伝播停止することです：これはバグである必要はあり

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

Answer 5

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

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