スマホのタッチイベントで２つ処理が実行されてしまう

現在HTML,Javascript（jQuery）を使ってスマホ用Webページを作っています。
そこでおかしな現象が起こってしまい対処したいのですが、そのように対処するのがいいか検討中です。

結論から言うと、
touchstartによるイベント処理時、タップしたボタンだけでなく、そのボタンを押したことにより表示されるモーダル内のリンクも処理が実行されてしまいます。そのリンクがタップした場所に表示される場合に限ってですが。つまりタップした場所にボタンとリンクが時間差でも表示される時そのどちらもが実行されてしまいます。そのような現象の対応方法はどのようにすべきでしょうか？

コードは以下のようになっています。

javascript
1var _e = ("ontouchstart" in document) ? 'touchstart':'click';
2$(window).on("load resize",function(){
3  $(#a_btn).on({_e,function(){
4     // モーダルを表示する処理。hiddenになっているモーダルエリアをshowする。
5  })
6})

結果的に次のようにすることで対処はできたのですが、いまいち綺麗な直し方とは言えないですし、動きがモッサリしてしまったり、端末によって時間のズレが生じそうだったりと懸念点は多いです。

javascript
1var _e = ("ontouchend" in document) ? 'touchend':'click';
2$(window).on("load resize",function(){
3
4  $(#a_btn).on({_e,function(){
5   setTimeout(function(){
6     // モーダルを表示する処理。hiddenになっているモーダルエリアをshowする。
7  },10);
8
9   // settimeoutを書く前は以下のような記述を入れていましたが、起動したモーダルはクリックされました。
10   // _e.preventDefault();
11})

touchendに変更し、setTimeoutを使っています。

どうも２つ処理が実行される原因がtouchstartのイベントが維持時間がありそうなのです。
イベントが瞬間的には知らず、少し続いているような。そのためsetTimeoutで実行を遅らせることにより、２つの処理が発生するのを防ぎました。
touchendは手が離れた瞬間から計測しないと処理にばらつきが出るためです。

このような暫定的な対応は致しましたが、かなり懸念点が残ります。
このような経験がある方などアドバイス頂ける方がいらっしゃいましたらよろしくお願いいたします。

ちなみに処理の最後に
・preventDefault();
・return false;
を書いても問題は解決されませんでした。

よろしくお願い致します。

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

回答2件

ベストアンサー

質問者様がおっしゃっている現象は確かに起こります。

touchstartイベントが発生するタイミングはGoogleのWeb Fundamentals サイト上でのタップ操作をサポートするによると初めて要素に指が触れたとき、またはユーザーがマウスでクリックをしたときに発生と記載してあります。

なので、ボタンをクリックしてmodalが出現するUIで、modal内に設定してあるtouchstartイベントや、リンクなどのDOMの位置がボタンと一緒になった場合、画面上ではボタンの位置をtouchしているので、イベントが発生してしまいます。

なのでこの場合は、ボタン要素にevent.preventDefault()してあげてください。

質問者様のコードをお借りするとしたら以下の通りになると思われます。

javascript
1var _e = ("ontouchstart" in document) ? 'touchstart':'click';
2$(window).on("load resize",function(){
3  $(#a_btn).on({_e,function(event){ //(event)を追記
4    event.preventDefault() //ココを追記
5  })
6})

僕のローカル環境で再現したコードも貼っておきます。
コード内容は、以下のとおりです。

ボタンをtouchstartしたらmodalが画面全体に出る
modal自体にtouchstartイベントにmodalを閉じるような内容を付与、

通常のtouchstartのみではボタンのtouchstartとmodalのtouchstartが同時に呼ばれてしまうので、modalが開けません（詳しく言うと、ボタンのtouchstartをcallした瞬間に、modalが出て、touchstartが反応してしまって閉じる状態になる）

html
1<html>
2<head>
3  <meta charset="UTF-8" />
4  <meta name="viewport" content="width=device-width, initial-scale=1">
5  <style>
6  #modal{
7    display: none;
8    position: absolute;
9    top:0;
10    right: 0;
11    left: 0;
12    bottom: 0;
13    margin: auto;
14    background: rgba(0,0,0,.6);
15  }
16  #modal.is-active{display: block;}
17  </style>
18</head>
19<body>
20  <button id="button">modal出現</button>
21  <div id="modal"></div>
22
23  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
24
25  <script>
26    $('#button').on('touchstart', function(e){
27      e.preventDefault()
28      $('#modal').addClass('is-active')
29    })
30
31    $('#modal').on('touchstart', function(){
32      $('#modal').removeClass('is-active')
33    }) 
34
35
36    //# sourceURL=userscript.js
37  </script>
38</body>
39</html>
40

繰り返しになりますが、ボタンのtouchstartイベントにevent.preventDefault()してあげてください。

投稿2017/09/04 02:17

MasakazuFukami

総合スコア1869

k499778

2017/09/04 20:07

回答ありがとうございます。やはりこのような現象は起きるのですね。その根拠となる説明をしていただいて大変感謝しております。ただ投稿内容にも記載した通り、preventdefaultでは処理は止まりませんでした。回答者様がアドバイスしてくださってるように書きました。なにかそうなりうる原因や対応方法など思い当たる部分がございましたらお教えいただけるとうれしいです。

MasakazuFukami

2017/09/05 02:13

すいませんpreventDefaultを書いた状況を上記に追記していただけないでしょうか？

k499778

2017/09/06 02:56

追記致します。

k499778

2017/09/11 23:13

大変遅くなってしまいましたが、追記しました。

MasakazuFukami

2017/09/12 01:37

すいません。 2点ほど気になる点があります。 1. _e.preventDefault()はエラーなく実行されますか？ var _e = ("ontouchend" in document) ? 'touchend':'click'; と書いてありますが、_eはただのstringではないでしょうか。 preventDefault()メソッドがあるeventオブジェクトはcallback関数のargumentsに渡ってくるものです。 $(#a_btn).on({_e,function(event){ //ここのeventです // _e.preventDefault() ではなく以下です。 event.preventDefault() }) 2. preventDefault()は一番上に追記してください。 $(#a_btn).on({_e,function(event){ //ここです }) ちょっと試してみてください。また、on()の中身は on({_e, function()})であっていますか？僕がその書き方を知らないので間違っていたら申し訳ないのですが .on('click', function(){ })じゃなくても動きましたでしょうか？

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

いまいちわからないのですが、「登録したイベントが複数回起こる」というのであれば $(window).on("load resize",function(){}); の中で $(#a_btn).on(); をしているので、ロード/リサイズのたびにイベントを重複して登録しているからです。

また、モーダルの仕様がわからないので回答しずらいです。「モーダル」が前面に配置して表示を消しているだけの場合、ボタンがあればクリックできます。

投稿2017/09/03 12:26

kei344

総合スコア69625

k499778

2017/09/03 13:00

回答ありがとうございます。これに関してはイベントの重複登録というより、1度しか発火していないけれど、ボタンとモーダルのリンクが押されてしまうイメージです。モーダルの仕様としてはおっしゃる通り前面にあって表示を消しているだけですね。だからなのかなあ。ただsetTimeoutでスリープするとボタンしかクリックされないので、やはり消えているモーダルのリンクを押しているわけではないのかなとも思います。

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

あなたの回答