スマートフォン実機でonclickが動作しない

##はじめに
お読み下さりありがとうございます。
こちらの記事を参考に、スマートフォン向けにjsでドロワーメニューを作成しているのですが、
PCのブラウザ上では動作するドロワーが実機では動作しなかったため今回ご質問させていただきました。
jsは勉強中の身であるため知識不足なところも多々ございますが、何卒ご教授いただけますと幸いです。
なお、下記のコードは実際のコードから必要部分のみの抜粋したものとなっております。

html
1<nav class="sp-nav">
2	<div class="nav-box">
3		<ul class="nav-menu">
4			<li class="nav-list"><a href="#">HOME</a></li>
5			<li class="nav-list"><a href="#">メニュー</a></li>
6			<li class="nav-list"><a href="#">メニュー</a></li>
7		</ul>
8	</div>
9</nav>
10<a class="sp-nav-button">
11	<div class="button-icon"><span></span><span></span><span></span></div>
12	<p class="button-text">MENU</p>
13</a>

css
1.sp-nav{
2		position: fixed;
3		z-index: 100;
4		top: 50px;
5		width: 100%;
6		transition: .5s;
7		transform: translateX(100%);
8		-webkit-overflow-scrolling: touch;
9		background: #fff;
10		display: block;
11	}
12
13	.nav-box{
14		height: 100%;
15		overflow-y: auto;
16	}
17
18	.nav-menu{
19		width: 100%;
20	}
21
22	.nav-list{
23		width: 100%;
24		height: 50px;
25		border-bottom: 1px solid #707070;
26	}
27
28	.nav-list a{
29		width: 96%;
30		margin: 0 auto;
31		display: flex;
32		align-items: center;
33		text-indent: .25em;
34		font-size: 18px;
35		color: #000;
36		height: 100%;
37		text-decoration: none;
38	}
39
40	.sp-nav-button, .sp-nav-button span{
41		display: block;
42		transition: .5s;
43		cursor: pointer;
44		text-decoration: none;
45	}
46
47	.sp-nav-button{
48		position: absolute;
49		height: 15px;
50		width: 20%;
51		right: 2%;
52		display: flex;
53		justify-content: space-between;
54		font-size: 16px;
55		top: 12px;
56		color: #000;
57	}
58
59	.button-icon{
60		width: 20px;
61	}
62
63	.sp-nav-button span{
64		position: absolute;
65		width: 20px;
66		height: 3px;
67		border-radius: 2px;
68		background: #000;
69	}
70
71	.sp-nav-button span:first-of-type{
72		top: 3px;
73	}
74
75	.sp-nav-button span:nth-of-type(2){
76		top: 9px;
77	}
78
79	.sp-nav-button span:last-of-type{
80		bottom: -3px;
81	}
82
83	.sp-nav-button.active span:first-of-type {
84		transform: translateY(5px) rotate(-45deg);
85	}
86	.sp-nav-button.active span:nth-of-type(2) {
87		opacity: 0;
88	}
89	.sp-nav-button.active span:last-of-type {
90		transform: translateY(-5px) rotate(45deg);
91	}
92
93	.nav-open{
94		position: fixed;
95		left: 0;
96	}
97
98	.nav-open .sp-nav{
99		transform: translateX(0);
100	}

js
1const sp_button = document.getElementsByClassName("sp-nav-button")[0];
2const button_text = document.getElementsByClassName("button-text")[0];
3const wrapper = document.getElementById("wrapper");
4var top_position = 0;
5
6sp_button.onclick = function(){
7	if (wrapper.classList.contains("nav-open")) {
8		wrapper.classList.remove("nav-open");
9
10		sp_button.classList.remove("active");
11		button_text.textContent="MENU";
12
13		wrapper.removeAttribute("style");
14		scrollTo(0, top_position);
15	} else {
16		var get_top = window.pageYOffset;
17		var wrapper_style = "top:-"+get_top+"px;";
18		wrapper.classList.add("nav-open");
19
20		sp_button.classList.add("active");
21		button_text.textContent="CLOSE";
22
23		wrapper.setAttribute("style", wrapper_style);
24		return get_top;
25	}
26};

##確認環境
PC: Mac OSX El Capitan/Google Chrome65.0.3325.162
実機: iPhoneSE iOS10.3.3 safari / Chrome 57.2987.137

以上、何卒宜しくお願い致します。

退会済みユーザー

2018/03/21 16:44

オブジェクトができたあとにイベントを追加してますか?

jun68ykt

2018/03/21 19:55 編集

検証していないので、こちらに書きます。sp_button.onclick = function(){ ・・・ }; を、sp_button. ontouchstart = function(){ ・・・ }; 　としてみるといかがでしょうか？それと次の投稿も参考になるかもしれません。https://qiita.com/38kun/items/ce6a26c9c59612e6f515 (38kunさん@Qiita)