タッチデバイスか非タッチデバイスかを判定し「クリックイベント」と「タッチイベント」を切り替えたい

前提

レスポンシブ対応のページでinputタグをクリックするとclassの値が渡され、表示が変更する機能をJavaScripで作っています。パソコンのブラウザ（safari以外）ではうまく動くのですが、スマートフォンのタップではうまく動作せず行き詰ってしまいました。

実現したいこと

スマートフォンのタップでも表示が変更する機能に修正したいです。
タッチデバイスか非タッチデバイスかを判定し「クリックイベント」と「タッチイベント」を切り替えたいのですが、やり方を教えていただきたいです。
また、パソコンのsafariでも動作しないのですが、こちらもアドバイスいただけると助かります。
よろしくお願いします。

該当のソースコード

JavaScript
1<script>
2    let prev_menu = null;
3    const menus = document.getElementsByName('menu');
4    Array.prototype.forEach.call(menus, function(menu) {
5        menu.addEventListener('click', buttonClick, false)
6    })
7    function buttonClick(event){
8        console.log(event.target.className);
9        const times = document.getElementsByClassName('first-disabled');
10        Array.prototype.forEach.call(times, function(time, index) {
11            if(index == 0 || Math.abs(Math.floor((new Date(time.value) - new Date(times[index-1].value)) / (1000 * 60))) > 15){
12                let tr = time.closest("tr");
13                const count = disabledCount(event.target.className);
14                for (let i = 0; i < count ; i++) {
15                    const prev = tr.previousElementSibling;
16                    Array.prototype.forEach.call(prev.children, function(child, it) {
17                        if (it !== 0 && new Date(child.children[0].value).getDate() == new Date(time.value).getDate()){
18                            child.children[0].disabled = true;
19                            child.children[1].innerText = '不可'
20                            tr = prev;
21                        }
22                    })
23                }
24                if(prev_menu !== null && disabledCount(prev_menu) > count){
25                    const countDiff = disabledCount(prev_menu) - count;
26                    for(let i = 0; i < countDiff; i++){
27                        const prev = tr.previousElementSibling;
28                        Array.prototype.forEach.call(prev.children, function(child, it) {
29                        if (it !== 0 && new Date(child.children[0].value).getDate() == new Date(time.value).getDate()){
30                            if(child.children[1].innerText !== '予約済'){
31                                child.children[0].disabled = false;
32                                child.children[1].innerText = ''
33                            }
34                            
35                            tr = prev;
36                        }
37                    })
38                    }
39                                
40                }
41            }
42        })
43        prev_menu = event.target.className;
44    }
45    function disabledCount(min){
46    return  parseInt(min) / 15
47    }
48</script>

PHP
1<!-- ↓↓料金選択↓↓ -->
2<section class="area rate-plan cf">
3<div class="title">
4<h3><span>Step1</span>料金を選ぶ</h3>
5</div>
6<div class="contentWrap">
7<table>
8<tbody>
9<!--料金<tr>開始-->
10<tr>
11<td><input type="radio" name="menu" value="スタンダードコース/35/3,000" id="35" class="35"/>
12<label for="radio1" class="radio">3,000円（35分）</label></td>
13</tr>
14<tr>
15<td><input type="radio" name="menu" value="スタンダードコース/75/5,000" id="75" class="75"/>
16<label for="radio2" class="radio">5,000円（75分）</label></td>
17</tr>
18<!--料金<tr>終了-->
19</tbody>
20</table>
21<p class="note"><?php echo $menuNote; ?></p>
22</div>
23</section>
24<!-- ↑↑料金選択↑↑ --> 
25<!-- ↓↓日時選択↓↓-->
26<section class="area dayTime cf">
27<div class="title">
28<h3><span>Step2</span>日時を選ぶ</h3>
29</div>
30<div class="contentWrap">
31<div class="dayForm">
32<table>
33<th class="no">時間</th>
34<th> <?php echo $todayFmt1; ?>（<?php echo $week[ $todayWeek ];?>）<br>
35<?php
36if ( in_array( $week[ $todayWeek ], $closed ) ) {
37  echo "<span>定休日</span>";
38} elseif ( in_array( $today, $closedDay ) ) {
39  echo "<span>休業日</span>";
40} else {
41  echo "&nbsp;";
42}
43?></th>
44<th> <?php echo $tomorrowFmt1; ?>（<?php echo $week[ $tomorrowWeek ];?>）<br>
45<?php
46if ( in_array( $week[ $tomorrowWeek ], $closed ) ) {
47  echo "<span>定休日</span>";
48} elseif ( in_array( $tomorrow, $closedDay ) ) {
49  echo "<span>休業日</span>";
50} else {
51  echo "&nbsp;";
52}
53?></th>
54<th> <?php echo $inTwoDaysFmt1; ?>（<?php echo $week[ $inTwoDaysWeek ];?>）<br>
55<?php
56if ( in_array( $week[ $inTwoDaysWeek ], $closed ) ) {
57  echo "<span>【定休日】</span>";
58} elseif ( in_array( $inTwoDays, $closedDay ) ) {
59  echo "<span>休業日</span>";
60} else {
61  echo "&nbsp;";
62}
63?></th>
64<?php
65//予約table時間変数設定
66$begin = new DateTime($start);
67$end = new DateTime($end);
68$interval = new DateInterval('PT'.$timeFrame.'M');
69$daterange = new DatePeriod($begin, $interval, $end->modify('+1 min'));
70foreach ( $daterange as $date ) {
71  $time = $date->format( "H:i:s" );
72  //日時（今日）
73  $variable = $today . ' '.$time;
74  $endTime = date( "H:i:s", strtotime( $time . "+15 minute" ) );
75  $variableEnd = $today .' '. $endTime;
76  //日時（明日）
77  $variable2 = $tomorrow .' '. $time;
78  $endTime2 = date( "H:i:s", strtotime( $time . "+15 minute" ) );
79  $variableEnd2 = $tomorrow .' '. $endTime2;
80  //日時（明後日）
81  $variable3 = $inTwoDays .' '. $time;
82  $endTime3 = date( "H:i:s", strtotime( $time . "+15 minute" ) );
83  $variableEnd3 = $inTwoDays .' '. $endTime3;
84?>
85<tr class='day_table'>
86<td class="time"><?php echo $time; ?></td>
87<!--今日-->
88<td><input type='radio' name='day' id='<?php echo $variable; ?>' value='<?php echo $variable; ?>' 
89<?php
90//データーベースから呼び出す
91$sql = "SELECT 
92          count(*) 
93        FROM 
94          customersub 
95        WHERE 
96          shop_id = 1 
97        AND 
98          reserve_day = '".$today."' 
99        AND (start_time < '".$variableEnd."' AND end_time >= '".$variable."')";
100
101$stmt = $dbh->query($sql);
102$num = $stmt->fetchColumn();
103
104if(in_array( $week[ $todayWeek ], $closed ) ) {
105 echo 'disabled';
106}elseif(in_array( $today, $closedDay )){
107 echo 'disabled';
108}elseif ( in_array( $variable, (array)$breakTime ) ) {
109 echo 'disabled';
110}elseif ( strtotime( date( 'H:i' ) ) > strtotime( $time ) ) {
111  echo 'disabled';
112}elseif($time <= $HalfAnHour ){
113echo 'disabled';
114}elseif($num >= 1){
115echo 'disabled class="first-disabled"';
116}
117?>>
118<label for='<?php echo $variable;?>'>
119<?php
120if ( in_array( $week[ $todayWeek ], $closed ) || in_array( $today, $closedDay ) ) {
121  echo "<i class='fas fa-minus'></i>";
122}  elseif ( strtotime( date( 'H:i' ) ) > strtotime( $time ) ) {
123  echo "<i class='fas fa-times'></i>"; //×
124} elseif ( in_array( $variable,  (array)$breakTime ) ) {
125  echo "<i class='fas fa-minus'></i>";
126}elseif ( strtotime( date( 'H:i' ) ) > strtotime( $time ) || $time <= $HalfAnHour ) {
127  echo "TEL";
128}elseif ( $num >= 1) {
129  echo "予約済";
130}else {
131  echo "<span class='result1'></span>"; //result1は選択可能のアイコン
132}
133?>
134</label></td>
135<!--明日-->
136<td><input type='radio' name='day' id='<?php echo $variable2;?>' value='<?php echo $variable2;?>'
137<?php
138//データーベースから呼び出す
139$sql = "
140SELECT 
141  count(*) 
142FROM 
143  customersub 
144WHERE 
145  shop_id = 1
146AND 
147  reserve_day = '".$tomorrow."' 
148AND
149  (start_time <'".$variableEnd2."' AND end_time >= '".$variable2."') 
150";
151
152$stmt = $dbh->query($sql);
153$num2 = $stmt->fetchColumn();
154
155if ($value == $week[$tomorrowWeek] ) {
156echo 'disabled';
157}elseif(in_array( $tomorrow, $closedDay )){
158echo 'disabled';
159}elseif ( in_array( $variable2,  (array)$breakTime ) ) {
160 echo 'disabled';
161}elseif($num2 >= 1){
162echo 'disabled class="first-disabled"';
163}
164?>>
165<label for='<?php echo $tomorrow.$time;?>'>
166<?php
167if ( in_array( $week[ $tomorrowWeek ], $closed ) || in_array( $tomorrow, $closedDay ) ) {
168  echo "<i class='fas fa-minus'></i>";
169} elseif ( in_array( $variable2,  (array)$breakTime ) ) {
170  echo "<i class='fas fa-minus'></i>";
171} elseif ( $num2 >= 1) {
172  echo "予約済";
173}else {
174  echo "<span class='result1'></span>";
175}
176?>
177</label></td>
178<!--明後日-->
179<td><input type='radio' name='day' id='<?php echo $variable3;?>' value='<?php echo $variable3;?>'
180<?php
181//データーベースから呼び出す
182$sql = "
183SELECT 
184  count(*) 
185FROM 
186  customersub 
187WHERE 
188  shop_id = 1
189AND 
190  reserve_day = '".$inTwoDays."' 
191AND
192  (start_time <'".$variableEnd3."' AND end_time >= '".$variable3."') 
193";
194
195$stmt = $dbh->query($sql);
196$num3 = $stmt->fetchColumn();
197
198if ($value == $week[$inTwoDaysWeek]) {
199echo 'disabled';
200}elseif(in_array( $inTwoDays, $closedDay )){
201echo 'disabled';
202}elseif ( in_array( $variable3,  (array)$breakTime ) ) {
203 echo 'disabled';
204}elseif($num3 >= 1){
205echo 'disabled class="first-disabled"';
206}
207?>>
208<label for='<?php echo $inTwoDays.$time; ?>'>
209<?php
210if ( in_array( $week[ $inTwoDaysWeek ], $closed ) || in_array( $inTwoDays, $closedDay ) ) {
211  echo "<i class='fas fa-minus'></i>";
212} elseif ( in_array( $variable3,  (array)$breakTime ) ) {
213  echo "<i class='fas fa-minus'></i>";
214} elseif ( $num3 >= 1) {
215  echo "予約済";
216}else {
217  echo "<span class='result1'></span>";
218}
219?>
220</label></td>
221</tr>
222<?php } ?>
223</table>
224</div>
225</div>
226</section>
227<!-- ↑↑日時選択↑↑-->

試したこと

https://alaki.co.jp/blog/?p=2546
を参考に修正しようと思ったのですが、下記を自分のコードのどのように追加すればいいのか分かりませんでした。

JavaScript
1$(function(){
2    	var clickEventType = (( window.ontouchstart!==null ) ? 'click':'touchend');
3
4    	$(document).on(clickEventType,'セレクタ名',function(){
5    		#アコーディオン処理
6    	});
7    });
8

回答2件

自己解決

Dateオブジェクトの動作がブラウザによって異なる為に起こった問題でした。
2016-09-30T12:34:56+09:00のような形で取れるようにしたところ両方の環境で正常動作するようになりました。

投稿2022/08/19 01:56

emi_ono

総合スコア81

javascript
1const menus = document.getElementsByName('menu');
2var isScrolling = 0 ;
3var timeoutId ;
4document.on( "scroll", function () {
5        	isScrolling = 1 ;
6 
7            // スクロールを停止して200ms後に終了とする
8            clearTimeout(timeoutId);
9 
10            timeoutId = setTimeout( function () {
11            	isScrolling = 0 ;
12            }, 200 );
13       });
14var clickEventType = (( window.ontouchstart!==null ) ? 'click':'touchend');
15    Array.prototype.forEach.call(menus, function(menu) {
16        menu.addEventListener(clickEventType, (event) =>{
17            if(isScrolling){
18                return;
19            }
20            buttonClick(event);
21        }, false)
22    })

最初のとこのコードをこれに変えて見て。
safariで動かないのはいろんな可能性あるから、そこはわからない。

投稿2022/08/16 12:08

shishin

総合スコア73

回答へのコメント

emi_ono

2022/08/16 14:25

回答していただいで、ありがとうございます！変更すると、console.log(event.target.className); の値が取れなくなってしまいました。また、「Uncaught TypeError: document.on is not a function」というエラーが表示されました。 4行目の document.on( "scroll", function ()部分が間違えているのでしょうか？

shishin

2022/08/16 14:55

そしたらdocument.addEventListenerに変えればいいよ、clickとtouchendは違うeventだからeventというオブジェクトの種類も違くて、だからbuttonClickもタッチデバイスがどうかによって変えないと行けないかも。これがtouchendのmdnのドキュメント https://developer.mozilla.org/en-US/docs/Web/API/Document/touchend_event#browser_compatibility これがclickのドキュメント https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event#browser_compatibility でもどっちもEventの継承だからtargetはどっちもあるはずですが、取れなくなったのはなにかのエラーが出てましたか？それともただのundefined?

emi_ono

2022/08/19 01:56

ありがとうございます！

あなたの回答