ウインドウサイズによって関数の実行を制御したいです

質問

jQueryを使って、ページ読み込み時、またはウインドウサイズが変更された際に、ウインドウサイズを取得し、取得したサイズによって特定の関数が実行されないような処理を作りたいです。

具体的には、ページ読み込み時・ウインドウサイズが変更された際、横幅が720px以下であれば、特定の要素にマウスオーバーした際に実行される関数を実行、721px以上の場合はマウスオーバーした際に実行される関数が実行されないようにしたいです。

私が書いたプログラムは以下のとおりです。

$(window).on('resize', function(){
//サイドメニュー アイコン位置調整
adjustIconPos();
});

//サイドメニュー アイコン位置調整
function adjustIconPos() {
var window_size = $(window).width();
alert(window_size);

if (window_size <= 720) {
$('.linkOpen').mouseover(function(){
alert("OK");
});
}
}

ページ読み込み時、ウインドウサイズが721px以上の場合は特定の要素にマウスオーバーしてもアラートが表示されないのですが、ウインドウサイズを一度720px以下にした後に再度721px以上にすると、マウスオーバーした際にアラートが表示されてしまいます。

その際、
alert(window_size);
で表示された横幅を確認する限りでは、721px以上あります。

初歩的な質問だと思うのですが解決ができず、
お分かりいただける方いらっしゃいましたらご教授いただけますと幸いです。

よろしくお願い致します。

回答No.2

H240S18B73 · ベストアンサー

解決法は二つ

リサイズ毎にadjustIconPosを実行することはせず

$('.linkOpen').mouseover(function(){
　if($(window).width()<=720){
alert('OK');
}
});

のように、mouseoverの都度ウィンドウサイズの判定をするか

$('.linkOpen').off('mouseover');
if (window_size <= 720) {
$('.linkOpen').mouseover(function(){
alert("OK");
});
}

のように都度イベントリスナーを取り除いてから
720以下の場合にイベントリスナーを登録するようにするか

後者の場合は、$('.linkOpen')のmouseoverイベントリスナーが
すべて取り除かれてしまうので、除去したくない
イベントリスナーが同居している、する可能性があるなら
名前空間を指定して任意のものだけを取り除けるように

どのみち今はリサイズのたびにmouseoverのイベントリスナーが
どんどん増えていく感じになっちゃってるので
今のやり方ではまずいです

お礼

H240S18B73様

早速のご回答、どうもありがとうございます。

ご提示いただきました２つの解決方法のうち、リサイズ毎にウィンドウサイズの判定を行い、その上で関数を実行することで解決できました。

イベントリスナーが増えていく、という認識がなく、また名前空間もまだあまり理解できていない状態なのですが、思い通りの動きができましたので大変助かりました。

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

回答No.1

m-take0220

window_sizeが720以下の場合にmouseoverの動作を設定していますが、720を超えている場合には何もしていません。
一旦、window_sizeが720以下にされると、mouseoverの動作が設定され、その後window_sizeが720超に再設定されても、その動作を解除するコードがないため、設定されたmouseoverの動作が有効なままになっています。

お礼

m-take0220様

早速のご回答、どうもありがとうございます。

設定されたmouseoverの動作を解除するコードがない、ということなのですね。
動作が設定されたままで、ということを理解できていなかったので、とても参考になりました。

ご回答いただきましたところ恐縮ですが、ソースにて解決方法をご提示いただきましたH240S18B73様のご回答をベストアンサーとさせていただけますと幸いです。

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