リサイズ時(条件下以外で)にイベントが発生しないようにしたい。

前提・実現したいこと

画面サイズ1162以上の時のみイベントを発生させ、
リサイズ時(1162以下のサイズ)はイベントが発生しないようにしたい。

else を使わず実装出来るのであれば、どう記述すれば良いかご教示お願いします。

発生している問題・エラーメッセージ

下のjavaScriptの記述で動作とHTMLの記述には問題ないのですが、
elseの後に1162以上の時に発生するイベントを消すための記述をしているため
リサイズ及びリロード時に不要なイベントが発生してしまってます。

該当のソースコード

HTML
1<nav>
2<ul>
3<li><a href="#">hoge1</a></li>
4<li><a href="#">hoge2</a>
5<ul>
6<li><a href="#">fuga1</a></li>
7<li><a href="#">fuga2</a></li>
8<li><a href="#">fuga3</a></li>
9</ul>
10</li>
11<li><a href="#">hoge3</a>
12</ul>
13</nav>

JavaScript
1var timer = false;
2$(window).on('load resize', function(){
3    if (timer !== false) {
4        clearTimeout(timer);
5    }
6    timer = setTimeout(function() {
7 if ($(window).width() >= 1162) { // If the window size is 1162 px or more
8
9$('nav ul').addclass('pc-nav');
10
11$('nav ul li').children(`ul`).addclass('pc-subnav');
12
13}  else {
14
15$('nav ul').removeclass('pc-nav');
16
17$('nav ul li').children('ul')
18  .removeclass('pc-subnav');
19
20}
21
22  }, 0);
23});

試したこと

else　以下の記述をすべて削除したところ、リロード時は不要なイベントは発生せず意図したように動作したのですが
リサイズ時(1662以下のサイズ)に1162以上の時のみ発生させているイベントが発生したままになってしまいます。
(1162以下のサイズから1162以上にリサイズした時は、1162以上の時のみ発生させたいイベントがちゃんと発生します)

行動規範の内容に同意します

回答1件

ベストアンサー

リサイズでのイベントの設定・削除にこだわりたい理由があるのであれば、別ですが。。。

イベント自体は常に設定しておいて、
イベントの中で画面幅を判定して処理を分ける方が、
リサイズするたびに、イベントを削除したり設定したりをガンバルより、
単純でいいのでは？と思いました。

具体的にどちらの幅で何をされたいのかを、把握するのに時間がかかりそうだったので、

サンプルを書いてみました
コピってファイルに保存して、ネットワークの繋がった環境でブラウザで開けば
たぶん動くはずなのです。。。

参考になるといいですが。

javascript
1<!DOCTYPE html>
2<head>
3<meta charset="UTF-8">
4<title>test</title>
5<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
6<script >
7var func_pc = function(clsname) {
8	alert('1162以上だよー。　'+clsname);
9};
10var func_sp = function(clsname) {
11	alert('1162未満だよー。'+clsname);
12};
13
14var timer = false;
15var pc_view = true;
16$(window).on('load resize', function(){
17	if (timer !== false) {
18		clearTimeout(timer);
19	}
20	//リサイズが終わったら、判定用にサイズを計ります。1162以上なら、pc_viewがtureに、未満ならfalseになる
21	timer = setTimeout(function() { pc_view = ($(window).width() >= 1162)} ,0);
22});
23
24//イベントはいつでも設定しておく
25$(function(){
26	//幅それぞれで動作を変えたい
27	$('.dummy1').on('click', function(e) {
28		//イベントの中で分岐処理
29		if(pc_view){
30			func_pc('dummy1');
31		}else{
32			func_sp('dummy1');
33		}
34	});
35	//広い幅でだけ動かしたい
36	$('.dummy2').on('click', function(e){
37		//イベントの中で分岐処理
38		if(pc_view){
39			func_pc('dummy2');
40		}
41	});
42	//狭い幅でだけ動かしたい
43	$('.dummy3').on('click', function(e){
44		//イベントの中で分岐処理
45		if(!pc_view){
46			func_sp('dummy3');
47		}
48	});
49});
50</script>
51
52<style >
53a { display: block; line-height: 20px; border: 1px black solid; padding: 5px; width: 100px; }
54</style>
55</head>
56
57<body>
58<a class="dummy1" href="javascript:void(0);">ダミー1</a>
59
60<a class="dummy2" href="javascript:void(0);">ダミー2</a>
61
62<a class="dummy3" href="javascript:void(0);">ダミー3</a>
63</body>
64</html>
65

投稿2018/04/24 01:41

編集2018/04/24 10:30

mix-peach

総合スコア1910

退会済みユーザー

2018/04/27 15:36 編集

アドバイスありがとうございます。こだわりはありません。イベント自体は常に設定しておいて、イベントの中で画面幅を判定して処理を分ける記述は、下記のような記述で合ってますでしょうか？ function pcAction() { $('nav ul').addclass('pc-nav'); $('nav ul li').children(`ul`).addclass('pc-subnav'); }; function spAction() { $('nav ul').removeclass('pc-nav'); $('nav ul li').children('ul') .removeclass('pc-subnav'); }; var timer = false; $(window).on('load resize', function(){ if (timer !== false) { clearTimeout(timer); } timer = setTimeout(function() { if ($(window).width() >= 1162) { pcAction(); } else { spAction(); } }, 0); });

退会済みユーザー

2018/04/24 15:05

丁寧に説明していただき、ありがとうございます！ご教示いただいたコードをもとに修正する事が出来ました。

行動規範の内容に同意します