【javascript】次のイベントに発火しないようにしたい

Question

現在HTMLやjavascript,jqueryを使ってボタンクリックイベントを行っています。

バリデーション処理と画面遷移処理を分けねばならず、
イベントの発火順序を生かして
バリデーション処理はmousedownイベント,
画面遷移処理はclickイベント
と切り分けたいと思っています。

そのときなのですが、
バリデーションチェックでエラーがあったら
「指定のclickイベントを発火させない」
といった実装をすることは可能でしょうか？

もし「指定のイベントや次のイベントを発火させない」といった処理の書き方や方法を知っている方がいましたら教えて頂きたいです。
よろしくお願い申し上げます。

Answer 1

デフォルトの挙動が設定されているものに関してなら、それを止めることは可能です。
例えば a要素 は指定されているURLに遷移するものですが、以下のようにすることでそのデフォルトの挙動（つまり画面遷移）を止めることができます。

var a = ... // a要素の取得
a.addEventListener('click', function (evt) {
    evt.preventDefault();
}, false);

ただ内容を読んでいると、そもそもバリデーションはクリックのタイミングじゃなくてもいいのかなと思いました。

つまりバリデーションのタイミングを別で持ち、もしバリデーションエラーであるならボタンなりリンクなりをそもそも無効にしてしまう、という処理のほうが適切ではないかなと感じましたがいかがでしょうか。

Comments

[k499778]

回答有り難うございます。
この投稿は実は以下リンクの続きであり、
https://teratail.com/questions/31090
エラーチェックはblurとfocusoutがFirefoxだと使えないため、
フォーカスアウトを断念しました。
そこで選択肢として残ったボタン押下時にバリデーションチェックを行っています。

なのでできればボタン押下時に処理をするのが好ましいと思っていました。

Answer 2

DOMのEventについては発火を止める事は基本的には出来ません
(input系のタグであればdisable属性を設定することで発生そのものを抑止できますが、完全に非活性になってしまうので今回の要件では適切ではなさそうです)

今回の要件としてはユーザが指定のDOMをclickした時に以下のような動作にしたいのだと思います。

1. バリデーションチェックを実施
2. エラーがなければ画面遷移をする

この想定であれば、そもそも1と2の処理をmousedown,clickの２つのイベントに振り分ける必要はあまり無く、単純にclickのイベントハンドラに渡すfunction内部で1の実行結果を元に処理を分岐させれば良いと思います。

バリデーションエラーが発生すれば単純に return でfunctionの処理を終了させてしまえばブラウザ上では何も起こりませんので。

Comments

[k499778]

回答有り難うございます。

基本的に無理なのですか。

そうなんですよね。仰るとおり
最初は同じファンクション内で「バリデーション」と「画面遷移」を行っていて
エラーだったらreturn falseでファンクションを抜け、画面遷移を行わないようにしていました。

しかし、画面遷移のファンクションは共通のjsを使っており、
バリデーションは自分の画面独自のものなので、共通処理の中でバリデーションをしないで欲しいと言われてしまいました。
もちろん条件分岐で「特定のテキストボックスのときのみバリデーションさせる」という処理は入れています。

その結果、その切り分けを行うのをどうすればいいのかわからず悩み、ここに投稿した次第です。

[Favi_ty]

>しかし、画面遷移のファンクションは共通のjsを使っており、
>バリデーションは自分の画面独自のものなので、共通処理の中でバリデーションをしないで>欲しいと言われてしまいました。

業務あるあるですね…w
そのようなケースの場合、以下のように画面遷移の共通処理をもう１つfunctionでラップしたものをイベントハンドラに登録するのはどうでしょうか。

```js
targetDOM.addEventListener('click', function (event) {
event.preventDefault();
if(hasValidationError()) return;
moveTo(event); // ここで共通の画面遷移処理を実行する
});
```

[k499778]

返答ありがとうございます。

そうですね(^_^;)w

なるほど。もう一つラップしたものを作って、共通処理にはpreventDefaultで飛ばさないというやり方でしょうか？

今調べながらなのですが、「moveTo()」はそういったメソッドがあるのでしょうか？
canvasで使うような、moveTo(x, y)で座標を指定するやり方は見つかったのですがこれは違う気がして。

あるいは他の回答者様のyamato_hikawaさんのように
共通jsの関数名を書けばいいのでしょうか？pageJump(); のように。

もしお時間ございましたらお答えいただけると助かります。

[Favi_ty]

あぁ、ごめんなさい。 `moveTo` や `hasValidationError` は既存の画面遷移処理メソッドやバリデーションチェック処理に対して便宜的に仮の名前として付けたものです。

実際にはそこを置き換えてもらう意図でした。

なんにせよ、解決できたようで幸いです。

Answer 3

理解できた範囲で書きますが、コードを見せていただいた方が具体的なアドバイスがしやすいです。

共通処理の設定がもし、下記のように書かれていたらダメなんですが、
そうではなく、処理を別関数に任せる形であれば、処理を再利用するのは簡単です。

// 再利用しにくい
$btn.on('click', function(){
  var hoge;
  hoge = .... 
});

別関数に任せるパターン。

// 再利用しやすいパターン

// 遷移処理が関数化されている
var pageJump = function(){
  var hoge;
  hoge = ...
};

$btn.on('click', function(){
  pageJump(); // イベント時には関数実行のみ
});

もし、具体的な処理を別関数に任せているのであれば、.off()を使って共通のクリックイベントを無効にしつつ、中の関数だけ再利用できます。
下記の設定を書くのはバリデートの設定を書いているJSの方です。

// 共通のクリックイベント（ページ遷移）を一旦無効にする。
$btn.off('click');

$btn.on('click', function(){
  // ここでバリデートの処理・関数実行。

  if(エラーがなければ){
    pageJump(); // ページ遷移の処理実行（ページ遷移の関数の再利用）
  }
});

イベントに名前を付けておくと「そのボタンに関連付けられたクリックイベント全て」ではなく、
「そのボタンに関連付けられたページ遷移のイベントだけ」をピンポイントで無効にもできます。

• [jQuery]イベントハンドラ登録時に名前空間を利用する

Comments

[k499778]

yamato_hikawaさん
回答ありがとうございます。

今回関数化されており、再利用しやすいパターンだと認識していますので
アドバイス頂いた形が使えると思います。

実際今日この知識を武器に勝負してきます。ありがとうございます。

[k499778]

少し気になったのですが、
共通jsのoffにしたイベントは他の処理でも使うので、
offにしたままではいけないような気がしてるのですが、
その場合もう一度onにする必要があるでしょうか？

---

追記

でも「特定のid」のクリックイベントを削除して、新たに登録しなおす訳だから他の同じ関数を使うクリックイベントには影響しないかもしれませんね。
変なこと言ってしまいました。m(__)m

[yamato_hikawa]

上の例ですと、特定のボタンのイベントを消すことになるので、
他のIDが設定されたボタンのイベントについてはそのままです。
実際に書いて確認された方が良いと思います。

[k499778]

返答ありがとうございます。
実際に家でコード作って試してできて、通勤中に思い立ち試すことができませんでした。

実際のコードは、共通jsの画面遷移処理がクラス名に対して行われていたため、offすることができませんでした。
offすると他のところの画面処理もできなくなるため。

ただこのやり方は非常に参考になりました。本当にありがとうございます。

[yamato_hikawa]

今回のボタンに対して、独自のクラス名を付けて、それをOFFにするだけでいいと思うのですが…

共通の処理が↓だとすると、
$('.common-btn').on(’click’,function(){ ...});

今回のボタンにはこの共通クラスに加えて、別のIDやクラスを付けて、
<a class="common-btn original-btn"></a>
などとします。

その上で、下記のようにすれば問題ないと思いますがいかがでしょうか？
var $btn = $('.original-btn');

$btn.off('click');

[k499778]

返答ありがとうございます。

自分もそのようにクラスではないですけど、idをつけてやったのですがうまくいかなかったんですよね。

$('.common-btn').on(’click’,function(){ ...});

<a class="common-btn" id=" original-btn"></a>

$("#original-btn").off('click');

$("#original-btn").on('click',function(){
/＊処理＊/
});

のように。

うまくいかなかったので、共通イベントが割り当てられているcommon-btnをoffにしないといけないのかと思ってしまい、深掘りしている時間もなかったので違うやり方を検討しました。

他の原因もあるかもしれないのでまた検証してみます。

[yamato_hikawa]

jsファイルの読み込み順はどうなっていますか？
1. 共通のJS
2. 今回編集するJS
の順だと問題ないと思います。
もし読み込みが逆だと、オフにしてもその後でイベントがオンにされてしまうので効かないと思います。

Answer 4

共通処理の中でバリデーションをしないで欲しいと言われてしまいました。

こういうのならいいのでしょうか

// A バリデーション
$("button").on("click", function(eve){
    // バリデーション
    if(!$("form").get(0).checkValidity()){
        eve.stopImmediatePropagation()
    }
})

// B 共通jsのコード
$("button").on("click", function(){
    // 画面遷移
})

A を B より先に登録しておきます
A でバリデーションが失敗したら stopImmediatePropagation を実行して B を実行しないようにします

Comments

[k499778]

ryls-nmmさん
回答ありがとうございます。
このやり方なら期待通りの実装を実現できるかもしれません。
本日実際に試してみます。
本当に有難うございます。

[k499778]

今自分で教えていただいたやり方を実現する簡単なコードを書いてみました。

登録順が大事だということで、独自処理を共通jsより上に書いたつもりなのですが、共通jsのイベントが先に呼ばれてしまいます。

この書き方に間違いがあれば教えていただければと思います。

common.jsの呼び出し位置を下にすることで登録順を変えれると自分は思っています。。

-----
○html側
....
<input type="button" id="hogeBtn">
</body>
<script>
$(function(){

$('#hogeBtn').on('click', function(eve){
console.log('独自js');

if(true){
eve.stopImmediatePropagation()
}
});
});
</script>
<script src="common.js"></script>
</html>

○common.js
$('#hogeBtn').on('click', function(){
console.log('共通js');
});

------

[k499778]

HTMLの方は$(function(){})で書いているのに、common.jsの方は$(function(){})で書かず、インラインのタイミングで呼ばれているからですね。(^_^;)
$(function(){})だとすべてのDOMを読み込んでから実行されるからインラインより遅いので。

HTML側をインラインにするか、common.jsを$(function(){})にするかで解決できました。
失礼しました。

[k499778]

このやり方でできました！
ありがとうございます。