jQuery 割り込みイベントの複数追加の仕方

Question

既にイベントを登録済みのボタンに対して、
ConfirmでOKを押された場合にのみ、以降の処理を実行させるようにしたいです。

// 割り込み処理はappendする形式にしたい
//// 差し込み確認処理その１
$(".exec-confirm").on("click", function() {
  return confirm("実行しますか？");
});
//// 差し込み確認処理その２
$(".re-confirm").on("click", function() {
  return confirm("本当に実行しますか？");
});

// 基本動作
$("button").on("click", function() {
  console.log( $(this).attr("name").val() );
});

<button type="button" class="exec-confirm" name="hoge">HOGEボタン</button>
<button type="button" class="exec-confirm re-confirm" name="fuga">FUGAボタン</button>

HOGEボタン押下時の理想
1.実行しますか？ -> キャンセルで処理終了
2.ログ出力

FUGAボタン押下時の理想
1.実行しますか？ -> キャンセルで処理終了
2.本当に実行しますか？ -> キャンセルで処理終了
3.ログ出力

現状
・ConfirmのOKキャンセルどちらを選択しても、次のイベントが発生してしまいます。

Answer 1

同じエレメントについている別なイベントハンドラを止めるには、イベントオブジェクトを（例えばeのように）引数にとって、e.stopImmediatePropagation();を実行する必要があります（jQueryリファレンス）。

$(".exec-confirm").on("click", function(e) {
  var result = confirm("実行しますか？");
  if(result) return;
  e.stopImmediatePropagation();
  return false;
});
//// 差し込み確認処理その２
$(".re-confirm").on("click", function(e) {
  var result = confirm("実行しますか？");
  if(result) return;
  e.stopImmediatePropagation();
  return false;
});

Comments

[cha-ra]

ありがとうございます。
まさにstopImmediatePropagation()のような処理を探していました！
この方法なら、差し込み処理を個別にコメントアウトしても、
他の処理には一切の影響が無いのが有りがたいです。

Answer 2

普通にやるならこんな感じでは？

<script>
$(function(){
  var flg=false;
  $(".exec-confirm").on("click", function() {
    flg=confirm("実行しますか？");
    if($(this).hasClass('re-confirm') && flg){
      flg=confirm("本当に実行しますか？");
    }
    if(flg){
      alert("実行");
    }else{
      alert("キャンセル");
    }
  });
});
</script>
<form>
<button type="button" class="exec-confirm" name="hoge">HOGEボタン</button>
<button type="button" class="exec-confirm re-confirm" name="fuga">FUGAボタン</button>
</form>

Answer 3

こんな感じとか。button の挙動もキャンセルしたければ button の function 内で分岐すればよいと思います。

$( '.exec-confirm' ).on( 'click', function() {
	//// 差し込み確認処理その１
	flag = confirm( '実行しますか？' );
	if ( flag && $( this ).hasClass( '.re-confirm' ) ) {
		//// 差し込み確認処理その２
		flag = confirm( '本当に実行しますか？' );
	}
	return flag;
});