web-dev-qa-db-ja.com

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

2つのイベントがあります。1つはウィンドウのサイズ変更を検出するためのもので、もう1つはdivのサイズ変更可能な停止を検出するためのものです。

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

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

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

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

javascriptjqueryresizeresizable
28
ilslabs

これらの答えのすべてが役立つわけではありません。問題は、サイズ変更イベントがウィンドウまでバブルすることです。したがって、divでサイズ変更が行われた場合でも、最終的にはe.targetがウィンドウになります。したがって、本当の答えは、サイズ変更イベントの伝播を単に停止することです。

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

イベントのバブリングが原因でこの動作が見られます。 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 。）

23
Matt Ball

実際に最も安全なのは、次のことだと思います。

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

私にとって、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
Johann
$(window).resize(function(e) {
  if (e.target == window)
    /* do your stuff here */;
});

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

4
Cristi Pufu