touchendイベントの処理順がおかしい

Question

お世話になります。

現在、ページ上で左右にスワイプをすると対応したメニュー画面が開かれる機能をjQueryで実装しているのですが、
ある要素上(画面横にスクロールする要素)ではその処理を止めたくなりました。
そこで、処理を止めたい要素でtouchstartイベントが実行された時からtouchendイベントが実行されるまで、trueとfalseを変数に持たせておきそれで判定をしようとしました。

$(function(){
  var hoge;
  $("body").on('touchstart', function(event){
    //touchstartの処理
  });
  $("body").on('touchend', function(event){
    if(hoge){ //noMenuがタッチされてから離されるまでこの処理を止めたい
      //touchendの処理
    }
  });
  $(".noMenu").on("touchstart", function(){
    hoge= false;
  });

  $(".noMenu").on("touchend", function(){
    hoge= true;
  });

});

しかし、bodyのtouchendよりもnoMenuのほうが優先されてしまい、理想通りの動きになりません。
記載順の問題かと思い、$(".noMenu").on("touchend"...の個所をbodyのtouchendイベントの前に置くなどしましたが、同じ動作でした。
jQueryのバージョンは1.8.3です。
何故、このような動作をするのでしょうか、ご教示のほど、よろしくお願いいたします。

Comments

[x_x]

switch は予約語でエラーになっていませんか？
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Reserved_Words

[makosankibu]

本当ですね...すみません。
質問する際に変数名などは別のものに書き換えています。
現状では誤解を招くので、修正しておきます。

Answer 1

何故、このような動作をするのでしょうか

バブリングする全てのイベントは、発生したエレメントでイベントを起こしてから、その親要素、さらに親要素…というように連続してイベントを起こしていきます。なので、実際にタッチされていたエレメントでtouchendが先に発生して、その後でbodyのイベントが反応します。

Comments

[makosankibu]

回答ありがとうございます。
なるほど。そのような順序でイベントが発生しているのですね。

-----
$("body").on('touchend', function(event){
if(switch){ //noMenuがタッチされてから離されるまでこの処理を止めたい
//touchendの処理
}
$(".noMenu").on("touchend", function(){
switch= true;
});
});
-----
上記のプログラムに変えてみたのですが、if文の前にnoMenuのイベントが先に動作しました。
直感的にはこの書き方で合ってそうなのですが、うまくいかないのは何故でしょう。
続けてで申し訳ないのですが、ご教示いただけますでしょうか

[maisumakun]

> 直感的にはこの書き方で合ってそうなのですが

全く合っていません。bodyでのtouchendのたびに.noMenuのtouchendがセットされるだけです。

「順番は変えられない」ことを前提に組むしかありません。

（あと、switchは予約語なので、変数名に使うと不具合が出る危険性があります）

[makosankibu]

確かに、onはイベントハンドラに関数を付けるメソッドですね。頓珍漢でした、すみません。
> 「順番は変えられない」ことを前提に組むしかありません。
大変勉強になりました。ありがとうございます。
> （あと、switchは予約語なので、変数名に使うと不具合が出る危険性があります）
修正依頼の欄にも記載いたしましたように。変数名は変えて掲載しおり、予約語を失念しておりました。
質問文は修正済みです。

[makosankibu]

また、
-----
$("body").on('touchend', function(event){
if(hoge){
//touchendの処理
} else {
hoge= true;
}
});

$(".noMenu").on("touchstart", function(){
hoge= false;
});
-----
と実装いたしました。
ありがとうございました。