teratail
回答率
85.47%
質問するログイン新規登録
トップJavaScriptに関する質問jQueryに関する質問です。

編集履歴

回答編集履歴

2

think49さんの意見反映

2016/02/13 06:34

投稿

miyabi-sun
miyabi-sun

スコア21158

test CHANGED
@@ -18,27 +18,29 @@
18
18
 
19
19
  # 対策
20
20
 
21
-
22
-
23
21
  これ読んでください。
24
22
 
25
23
  [http://www.webcyou.com/?p=4528](http://www.webcyou.com/?p=4528)
26
24
 
27
25
 
28
26
 
29
- jQuery内では`this.stopPropagation()`で良いので、
27
+ ## jQueryを使った場合→無理
30
-
28
+
29
+
30
+
31
- プラグインAの中身を下記のように変更すれば意図通りの動作になります。
31
+ プラグインAの中身を下記のように変更すれば意図通りの動作になるはず…
32
+
32
-
33
+ ですが、think49さんに指摘＆調査して頂いた内容により上手く動作せず、やはり確認ダイアログは表示されてしまいます。
33
-
34
-
34
+
35
+
36
+
35
- ```
37
+ ```plugin_A.js
36
38
 
37
39
  (function($) {
38
40
 
39
41
  $.fn.plugin_A = function() {
40
42
 
41
- this.submit(function() {
43
+ this.submit(function(event) { // ここにevent引数を用意
42
44
 
43
45
  if ($("input", this).val()) {
44
46
 
@@ -48,7 +50,7 @@
48
50
 
49
51
  $(".errMsg").show();
50
52
 
51
- this.stopPropagation(); // こう差し込む
53
+ event.stopPropagation(); // これで良いはず…正常動作しないだと！？
52
54
 
53
55
  }
54
56
 
@@ -61,3 +63,173 @@
61
63
  };
62
64
 
63
65
  ```
66
+
67
+
68
+
69
+ ## addEventListenerを使った場合→無理
70
+
71
+
72
+
73
+ 全く同じロジックを、addEventListnerを使って実装します。
74
+
75
+ 一度 `this.each` をかませて置くことで内部のthisはDomエレメントになるので…
76
+
77
+
78
+
79
+ ```plugin_A.js
80
+
81
+ (function($) {
82
+
83
+ $.fn.plugin_A = function() {
84
+
85
+ this.each(function() {
86
+
87
+ this.addEventListener('submit', function(event){
88
+
89
+ console.log("plugin_A submit!");
90
+
91
+ if ($("input", this).val()) {
92
+
93
+ $(".errMsg").hide();
94
+
95
+ } else {
96
+
97
+ $(".errMsg").show();
98
+
99
+ event.stopPropagation();
100
+
101
+ event.preventDefault();
102
+
103
+ return false;
104
+
105
+ }
106
+
107
+ }, false);
108
+
109
+ });
110
+
111
+ return this;
112
+
113
+ };
114
+
115
+ })(jQuery);
116
+
117
+ ```
118
+
119
+
120
+
121
+ ```plugin_B.js
122
+
123
+ (function($) {
124
+
125
+ $.fn.plugin_B = function() {
126
+
127
+ this.each(function() {
128
+
129
+ this.addEventListener('submit', function(event){
130
+
131
+ console.log('plugin_B submit!');
132
+
133
+ return confirm('送信しますか？');
134
+
135
+ }, false);
136
+
137
+ });
138
+
139
+ return this;
140
+
141
+ };
142
+
143
+ })(jQuery);
144
+
145
+ ```
146
+
147
+
148
+
149
+ はい、エラーメッセージと、確認ダイアログが出たので失敗です。
150
+
151
+
152
+
153
+ ## click -> submitのイベント伝播に変更
154
+
155
+
156
+
157
+ 更にプラグインAのネストが進んで超キモくなりましたが、
158
+
159
+ なんとか達成できました。
160
+
161
+
162
+
163
+ ```plugin_A.js
164
+
165
+ (function($) {
166
+
167
+ $.fn.plugin_A = function() {
168
+
169
+ this.each(function(){
170
+
171
+ var $self = $(this);
172
+
173
+ $self.find('button').each(function(){
174
+
175
+ this.addEventListener('click', function(event){
176
+
177
+ console.log("plugin_A submit!");
178
+
179
+ if ($("input", $self).val()) {
180
+
181
+ $(".errMsg").hide();
182
+
183
+ } else {
184
+
185
+ $(".errMsg").show();
186
+
187
+ // event.stopPropagation();
188
+
189
+ event.preventDefault();
190
+
191
+ return false;
192
+
193
+ }
194
+
195
+ }, false);
196
+
197
+ });
198
+
199
+ });
200
+
201
+ return this;
202
+
203
+ };
204
+
205
+ })(jQuery);
206
+
207
+ ```
208
+
209
+
210
+
211
+ Input要素内でEnterを押してサブミットさせたらどうなるかと思って試しましたが、
212
+
213
+ サブミットボタンをクリックした扱いになって意図どおりの動作になります。
214
+
215
+
216
+
217
+ # 結論
218
+
219
+
220
+
221
+ submit -> submit　のイベント伝播を食い止める方法は不可能なようです。
222
+
223
+ click -> submit にすることで可能でした。
224
+
225
+
226
+
227
+ ---
228
+
229
+
230
+
231
+ 追記：
232
+
233
+ 誤りがあったので修正しています。
234
+
235
+ think49さんに指摘＆調査していただいた内容を元に解決法を別口で記載しています。

1

調整

2016/02/13 06:34

投稿

miyabi-sun
miyabi-sun

スコア21158

test CHANGED
@@ -1,6 +1,4 @@
1
- 質問文の段階で書かれている内容と動作自体は正しいです。
1
+ JavaScriptに関するイベントの伝播関係のミスが原因です
2
-
3
- 単純にそう書けばこうなるよねという話で…
4
2
 
5
3
 
6
4
 
@@ -10,9 +8,11 @@
10
8
 
11
9
  - プラグインAとBがそれぞれフォームのサブミットに対してイベント登録
12
10
 
13
- - プラグインAが先に登録されたので、「確認する」ボタンを押された時に先に実行される
11
+ - 「確認する」ボタンを押された時にsubmitイベントが発行される
14
12
 
13
+ - イベントの処理順番は登録順、つまりA→Bの順
14
+
15
- - サブミットイベントが発生しているので、プラグインAの結果によらず、プラグインBが実行される
15
+ - Bはsubmitイベントが実行されたタイミングで動作確定、つまりAの戻り値なんて関係なく実行される
16
16
 
17
17
 
18
18
 
@@ -20,13 +20,15 @@
20
20
 
21
21
 
22
22
 
23
- 手抜きでごめんなさい、これ読んでください。
23
+ これ読んでください。
24
24
 
25
25
  [http://www.webcyou.com/?p=4528](http://www.webcyou.com/?p=4528)
26
26
 
27
27
 
28
28
 
29
+ jQuery内では`this.stopPropagation()`で良いので、
30
+
29
- プラグインAの中身をこう変更してください。
31
+ プラグインAの中身を下記のように変更すれば意図通りの動作になります。
30
32
 
31
33
 
32
34