JQueryのaddClassメソッドを追加すると、想定外の動作をしてしまう

前提環境

jQuery：v2.1.4 (minify版)
確認環境：GoogleChrome(65.0.3325.181) Developer ToolsのデバイスモードでiPhone5をエミュレートしています

実現したいこと

以下のコードにより、タッチイベント毎にulの表示をトグルしようとしています。

javascript
1      $('.target-class').on('touchstart', function() {
2        if ( $(this).hasClass('touched') === true){
3          $(this).removeClass('touched');
4          $(this).find('ul').slideDown(500, 'easeOutExpo');
5        }else{
6          $(this).addClass('touched');
7          $(this).find('ul').slideUp(500, 'easeOutExpo');
8        }
9        return false;
10      });

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

以下のような謎の現象が発生します。
0. タッチする前、タッチ対象の要素のクラスは「target-class」のみ(touchedクラスは設定されていない)
0. タッチを行い、タッチイベントが発生し、冒頭のhasClass('touched')でブレイクすると、何故か$(this)のクラスは「target-class touched」になっている(touchedが付与されている)
0. 上記事象により、初回タッチ時に、$(this).hasClass('touched') === trueが正になり、ulが表示されない

試したこと

touchedクラスが他のイベントにより付与されていないことは確認しました。
付与するクラスをtouchedではなくaaabbbcccdddに変更してみても、同様の事象が発生しました。

※aaabbbcccdddが付与されてしまう。

$(this).addClass('touched');の行をコメントアウトすると、事象は発生しなくなりました。

※当然、addClassを外してしまうと、目的の動作を実現できなくなってしまいます。

addClass/removeClassの部分をtoggleClassに変更してみても、同様の事象が発生してしまいます。

###補足情報
他のイベント(scrollやmouseenter)処理でもaddClass/removeClassを使用している箇所がありますが、そちらは問題なく動作しています。
申し訳ありませんが、都合により、ソース全文は公開できません。

x_x

2018/04/05 05:51

event.preventDefault()でブレイクするとはどういう意味でしょうか？　何か勘違いしているかもしれません。

poge

2018/04/05 06:27

すみません、本文編集で整合性が取れなくなっていたため内容を修正しました

x_x

2018/04/05 07:02

jQuery UIのバージョンはいくつですか？

x_x

2018/04/05 07:31

確かにブレイクポイントを置いた時の挙動がおかしいようです(一回止まらずに走ってしまってる？)。解決策が思いつきませんが

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

回答2件

あまり関係ないかもしれませんが

functionが渡しているイベント：evtと
殺しているイベント：eventが違いますが大丈夫でしょうか？

投稿2018/04/05 01:43

yambejp

総合スコア114779

poge

2018/04/05 02:09

evet部分は記述ミスのため、訂正します。発生している事象とは関係ないようです。

yambejp

2018/04/05 02:51

ロジック的には問題ないようですが・・・たとえばtouchstartをclickでデバッグしてみるとどうでしょうか？

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

addClass/removeClassの部分をtoggleClassに変更してみても、同様の事象が発生してしまいます。

とありますがtoggleClassにする場合

javascript
1$('.target-class').on('touchstart', function() {
2        $(this).toggleClass('touched');
3        if ( $(this).hasClass('touched') === true){
4          //$(this).removeClass('touched');
5          $(this).find('ul').slideDown(500, 'easeOutExpo');
6        }else{
7          //$(this).addClass('touched');
8          $(this).find('ul').slideUp(500, 'easeOutExpo');
9        }
10        return false;
11      });

これでも切り替えられないということですか？もっと言えば

javascript
1$('.target-class').on('touchstart', function() {
2        $(this).find('ul').slideToggle(500, 'easeOutExpo');
3        return false;
4      });