パソコンのクリックイベントがスマホでは意図しない動作となる

[現状とやりたいこと]

以下のようにJavascript（Jquery）でクリックイベントにより.blackoutDefault要素のclassをadd / removeすることでopacityを変化させるイベントハンドラ（処理）を実装しております。

PCにおいては以下の意図した動作となります。
1)一度クリックすると.blackoutChangeが追加され要素がグレイアウトしているように見える
2)もう一度クリックすると.blackoutChangeが削除されグレイアウト無しで見える

一方で携帯で動作を確認すると以下のような動作になっていしまいます。
1)一度クリックすると.blackoutChangeが追加され要素がグレイアウトしているように見える
2)もう一度クリックすると.blackoutChangeが削除されてはいるがグレイアウトは解除されず他の要素をタップすると
初めてグレイアウト無しで見える

JSbinでの動くコード

[調べたことと試したこと]

もともとクリックイベントしか設定していなかったのですが、調べたところクリックとタップ(touchstart)はイベントとして異なることからそれぞれswitchEventとして定義してみたのですが以前問題は解消されません。

[質問]

本件が意図しない動作となってしまう原因と解決法についてアドバイスをいただけますでしょうか。
よろしくお願い致します。

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width">
6  <title>JS Bin</title>
7</head>
8<body>
9<div id="" class="btn ckIcon cIcon">
10 <div class="blackoutDefault blackoutHover"></div>
11 <img class="ck_image" src="">
12<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
13</div>
14</body>
15</html>

javascript
1var switchEvent;
2
3if (window.ontouchstart === null){
4  switchEvent ='touchstart';
5}
6if (window.ontouchstart === undefined) {
7  switchEvent ='click';
8}    
9    
10    ckshowhide('.kIcon','kClose','k');
11    ckshowhide('.cIcon','cClose','c');
12    
13 function ckshowhide (icon,closeClass,ck){
14 $(function(){
15  $(icon).on(switchEvent,function(){
16       if($(icon).hasClass(closeClass)){
17         $(icon +'> .blackoutDefault').removeClass('blackoutChange');
18         $('.'+ck+'_icon > .blackout_'+ck).removeClass('blackout_'+ck+'_change');
19         $(icon).removeClass(closeClass);
20       }
21       else if(!($(icon).hasClass(closeClass))){
22         $(icon +'> .blackoutDefault').addClass('blackoutChange');
23         $('.'+ck+'_icon > .blackout_'+ck).addClass('blackout_'+ck+'_change');
24         $(icon).addClass(closeClass);
25       }
26  })
27 })
28}

css
1.ckIcon {
2    background: #e8e6e6db;
3}
4
5.btn {
6    border-radius: 5px;
7    box-shadow: none;
8    cursor: pointer;
9    width: 45px;
10    height: 45px;
11    display: flex;
12    flex-direction: column;
13    justify-content: center;
14    align-items: center;
15    cursor: pointer;
16}
17
18.blackoutDefault {
19    position: absolute;
20    width: 45px;
21    height: 45px;
22    background: #3b3b3b;
23    opacity: 0;
24    border-radius: 5px;
25    cursor: pointer;
26}
27
28.ck_image {
29    width: 60%;
30}
31
32.ckIcon:hover .blackoutHover {
33    opacity: 0.5;
34}
35
36.blackoutChange{
37  opacity: 0.5;
38}

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

回答2件

「jQuery Event touch」でぐぐってみました。

マウスとタッチスクリーン混在環境のイベントを実装するなら
[jQuery] click / touch / pointer イベントを完全に制御するも参考になるかもしれません。

追記）
JavaScriptで明示される div.kIcon は気になります。

HTML
1  <div class="btn ckIcon cIcon">
2    <!-- .ckIcon:cssの:hover用, cIcon:click/touchestart用, kIcon:? -->
3  </div>

Javascript の方でコメントアウトしても良さそうな箇所。

javascript
1    //ckshowhide('.kIcon','kClose','k');

投稿2019/10/28 22:20

編集2019/10/29 09:00

AkitoshiManabe

総合スコア5434

pegy

2019/10/28 23:30

コメントいただだき誠にありがとうございます。参考に提示いただいた記事に記載のあった各イベントを設置してみたのですが、やはり動作が確認できませんでした。。。原因不明です、、引き続き私も調べています。

pegy

2019/10/29 13:28

コメントの追加をいただきありがとうございます。 ckshowhide('.kIcon','kClose','k');については、本件に直接は関係ないので、消すべきでした。もちろん動作を確認させていただきましたが、改善はいたしませんでした。よくありがちな問題で簡単に解決するかと過信していたのですが、調べがつかないです。。。んん、原因はわからないのでcssやJavascriptの構造を変えるのはすぐにはしたくないので自分も頑張ってもっとぐぐります

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

自己解決

直接的な理由はわかりませんでしたが結果的にhoverを削除したところうまく動作させることができました。
何かクリック(touchstart)と干渉しているのかもしれませんが、いろいろなケースで検証してみます。
.ckIcon:hover .blackoutHover {
/* opacity: 0.5;*/
}

課題は解決したので一旦closeします

投稿2019/10/30 23:11

pegy

総合スコア245