質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

4回答

19462閲覧

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

k499778

総合スコア599

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

2クリップ

投稿2016/03/31 13:13

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

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

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

js

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

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

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

投稿2016/03/31 14:44

edo_m18

総合スコア2283

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

k499778

2016/03/31 15:14

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

0

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

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

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

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

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

投稿2016/03/31 13:40

Favi_ty

総合スコア42

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

k499778

2016/03/31 15:20 編集

回答有り難うございます。 基本的に無理なのですか。 そうなんですよね。仰るとおり 最初は同じファンクション内で「バリデーション」と「画面遷移」を行っていて エラーだったらreturn falseでファンクションを抜け、画面遷移を行わないようにしていました。 しかし、画面遷移のファンクションは共通のjsを使っており、 バリデーションは自分の画面独自のものなので、共通処理の中でバリデーションをしないで欲しいと言われてしまいました。 もちろん条件分岐で「特定のテキストボックスのときのみバリデーションさせる」という処理は入れています。 その結果、その切り分けを行うのをどうすればいいのかわからず悩み、ここに投稿した次第です。
Favi_ty

2016/03/31 15:44

>しかし、画面遷移のファンクションは共通のjsを使っており、 >バリデーションは自分の画面独自のものなので、共通処理の中でバリデーションをしないで>欲しいと言われてしまいました。 業務あるあるですね…w そのようなケースの場合、以下のように画面遷移の共通処理をもう1つfunctionでラップしたものをイベントハンドラに登録するのはどうでしょうか。 ```js targetDOM.addEventListener('click', function (event) { event.preventDefault(); if(hasValidationError()) return; moveTo(event); // ここで共通の画面遷移処理を実行する }); ```
k499778

2016/03/31 22:13

返答ありがとうございます。 そうですね(^_^;)w なるほど。もう一つラップしたものを作って、共通処理にはpreventDefaultで飛ばさないというやり方でしょうか? 今調べながらなのですが、「moveTo()」はそういったメソッドがあるのでしょうか? canvasで使うような、moveTo(x, y)で座標を指定するやり方は見つかったのですがこれは違う気がして。 あるいは他の回答者様のyamato_hikawaさんのように 共通jsの関数名を書けばいいのでしょうか?pageJump(); のように。 もしお時間ございましたらお答えいただけると助かります。
Favi_ty

2016/04/01 03:33

あぁ、ごめんなさい。 `moveTo` や `hasValidationError` は既存の画面遷移処理メソッドやバリデーションチェック処理に対して便宜的に仮の名前として付けたものです。 実際にはそこを置き換えてもらう意図でした。 なんにせよ、解決できたようで幸いです。
guest

0

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

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

JavaScript

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

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

JavaScript

1// 再利用しやすいパターン 2 3// 遷移処理が関数化されている 4var pageJump = function(){ 5 var hoge; 6 hoge = ... 7}; 8 9$btn.on('click', function(){ 10 pageJump(); // イベント時には関数実行のみ 11});

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

// 共通のクリックイベント(ページ遷移)を一旦無効にする。 $btn.off('click'); $btn.on('click', function(){ // ここでバリデートの処理・関数実行。 if(エラーがなければ){ pageJump(); // ページ遷移の処理実行(ページ遷移の関数の再利用) } });

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

投稿2016/03/31 15:59

編集2016/03/31 16:12
yamato_hikawa

総合スコア2092

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

k499778

2016/03/31 21:57

yamato_hikawaさん 回答ありがとうございます。 今回関数化されており、再利用しやすいパターンだと認識していますので アドバイス頂いた形が使えると思います。 実際今日この知識を武器に勝負してきます。ありがとうございます。
k499778

2016/04/01 00:20 編集

少し気になったのですが、 共通jsのoffにしたイベントは他の処理でも使うので、 offにしたままではいけないような気がしてるのですが、 その場合もう一度onにする必要があるでしょうか? --- 追記 でも「特定のid」のクリックイベントを削除して、新たに登録しなおす訳だから他の同じ関数を使うクリックイベントには影響しないかもしれませんね。 変なこと言ってしまいました。m(__)m
yamato_hikawa

2016/04/01 02:25

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

2016/04/01 03:15

返答ありがとうございます。 実際に家でコード作って試してできて、通勤中に思い立ち試すことができませんでした。 実際のコードは、共通jsの画面遷移処理がクラス名に対して行われていたため、offすることができませんでした。 offすると他のところの画面処理もできなくなるため。 ただこのやり方は非常に参考になりました。本当にありがとうございます。
yamato_hikawa

2016/04/01 07:32 編集

今回のボタンに対して、独自のクラス名を付けて、それをOFFにするだけでいいと思うのですが… 共通の処理が↓だとすると、 $('.common-btn').on(’click’,function(){ ...}); 今回のボタンにはこの共通クラスに加えて、別のIDやクラスを付けて、 <a class="common-btn original-btn"></a> などとします。 その上で、下記のようにすれば問題ないと思いますがいかがでしょうか? var $btn = $('.original-btn'); $btn.off('click');
k499778

2016/04/01 22:01 編集

返答ありがとうございます。 自分もそのようにクラスではないですけど、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

2016/04/01 22:41

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

0

ベストアンサー

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

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

javascript

1// A バリデーション 2$("button").on("click", function(eve){ 3 // バリデーション 4 if(!$("form").get(0).checkValidity()){ 5 eve.stopImmediatePropagation() 6 } 7}) 8 9// B 共通jsのコード 10$("button").on("click", function(){ 11 // 画面遷移 12})

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

投稿2016/03/31 15:44

ryls-nmm

総合スコア633

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

k499778

2016/03/31 22:01

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

2016/03/31 22:43 編集

今自分で教えていただいたやり方を実現する簡単なコードを書いてみました。 登録順が大事だということで、独自処理を共通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

2016/03/31 22:56

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

2016/04/01 03:08

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問