JQuery UI resizableで、リサイズ時のバブリングが止められない

Question

###実現したいこと
要素をリサイズした際の、ウィンドウへのバブリングを止めたいです。

###発生している問題
「.box」をリサイズすると、「要素をリサイズ中です」だけでなく「画面をリサイズしました」まで表示されてしまいます。

###該当のソースコード
動くサンプル：http://jsfiddle.net/ht72skx4/

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css" type="text/css" media="all" />

<div class="box" style="width:100px; height: 100px; border:5px solid #000; background: #ff0000;"></div>

$('.box').resizable({
  handles: 'e',
  resize : function (event, ui) {	
    resizeEvent();
  },  
  stop   : function (event, ui) {
    stopEvent();	
  }
});		

var resizeTimer = null;
$(window).resize(function() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    console.warn('画面をリサイズしました');
  }, 200);
});

function stopEvent(){
	console.log('要素をリサイズしました');
}
function resizeEvent(){
	console.log('要素をリサイズ中です');
}

###試したこと
おそらくバブリングだろうと思い下記２パターン試しました。要素のリサイズ中の「stopPropagation」と、resizableへの「stopPropagation」で、「追加」とコメントがある箇所です。

▼要素のリサイズ中の「stopPropagation」

$('.box').resizable({
  handles: 'e',
  resize : function (event, ui) {	
    event.stopPropagation(); //追加
    resizeEvent();
  },  
  stop   : function (event, ui) {
    stopEvent();	
  }
});	

▼resizableへの「stopPropagation」

$('.box').resizable({
  handles: 'e',
  resize : function (event, ui) {	
    resizeEvent();
  },  
  stop   : function (event, ui) {
    stopEvent();	
  }
})
// 追加
.on('resize', function (event) {
    event.stopPropagation(); 
});		

いずれも実現には至らず、質問させて頂く運びになりました。

解決方法をご存じの方いらっしゃいましたらご教授願えませんでしょうか。

Answer 1

考え方は合っています。イベントの伝播を停止すえばOKです。
問題は、jsfiddle で読み込んでいるjQueryのバージョンです。
jQuery1.6 を読み込んでいるようなので onメソッドが使えず、ちゃんと動かなかったということです。
onメソッドは1.7から使えます。
冷静になって、コンソールのエラー内容を確認すればおのずと導き出すことが出来たかもしれません。

jQuery1系使うなら最新のもの、onを使うので最低でも1.7以上のものを使って下さい。
uiの方も新しいものを入れておいたほうが良いかと思います。

　

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

$('.box').resizable({
  handles: 'e',
  resize : function (event, ui) {
    resizeEvent();
  },
  stop   : function (event, ui) {
    stopEvent();
  }
}).on('resize', function (e) {
    e.stopPropagation();
});

var resizeTimer = null;
$(window).resize(function() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    console.warn('画面をリサイズしました');
  }, 200);
});

function stopEvent(){
    console.log('要素をリサイズしました');
}
function resizeEvent(){
    console.log('要素をリサイズ中です');
}

Comments

[gonsy]

あせりました。ありがとうございました。