teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問submitイベントハンドラ関数の中で <input type="submit"> を得るには？

編集履歴

質問編集履歴

5

event\.explicitOriginalTarget の MDN リンク、サンプルコードリンク追加

2015/12/02 12:38

投稿

think49
think49

スコア18164

test CHANGED
File without changes
test CHANGED
@@ -153,3 +153,13 @@
153
153
  **(2015/11/26 21:20追記)**
154
154
 
155
155
  `listener` オブジェクトを共有する事で `handleSubmit` 上位スコープに `listner` オブジェクトを置かなくて済むようにコードを修正しました。
156
+
157
+
158
+
159
+ **(2015/12/02 21:38追記)**
160
+
161
+ eripong さんに Firefox 独自拡張の `event.explicitOriginalTarget` を紹介して頂きました。
162
+
163
+ - [Event.explicitOriginalTarget - Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/Event/explicitOriginalTarget)
164
+
165
+ - [click イベントと併用して submit イベントハンドラ関数内で input[type=submit] を得る - JSFiddle](http://jsfiddle.net/wz8e2enL/6/)

4

`listener` オブジェクトを共有する事で `handleSubmit` 上位スコープに `listner` オブジェクトを置かなくて済むようにコードを修正

2015/12/02 12:38

投稿

think49
think49

スコア18164

test CHANGED
File without changes
test CHANGED
@@ -52,16 +52,6 @@
52
52
 
53
53
  (function () {
54
54
 
55
- var submitListener = {
56
-
57
- handleEvent: handleSubmit,
58
-
59
- submit: null
60
-
61
- };
62
-
63
-
64
-
65
55
  function handleSubmit (event) {
66
56
 
67
57
  console.log(event.type, this.submit);
@@ -84,7 +74,7 @@
84
74
 
85
75
  if (input.tagName === 'INPUT' && input.type === 'submit') {
86
76
 
87
- submitListener.submit = input;
77
+ this.submit = input;
88
78
 
89
79
  console.log(event.type, input);
90
80
 
@@ -94,15 +84,45 @@
94
84
 
95
85
 
96
86
 
97
- function main () {
87
+ function handleClickSubmit (event) {
98
88
 
89
+ switch (event.type) {
90
+
91
+ case 'click':
92
+
93
+ handleClick.call(this, event);
94
+
95
+ break;
96
+
99
- var form = document.querySelector('form');
97
+ case 'submit':
98
+
99
+ handleSubmit.call(this, event);
100
+
101
+ break;
102
+
103
+ }
104
+
105
+ }
100
106
 
101
107
 
102
108
 
103
- form.addEventListener('submit', submitListener, false);
109
+ function main () {
104
110
 
111
+ var form = document.querySelector('form'),
112
+
113
+ listener = {
114
+
115
+ handleEvent: handleClickSubmit,
116
+
117
+ submit: null
118
+
119
+ };
120
+
121
+
122
+
123
+ form.addEventListener('submit', listener, false);
124
+
105
- form.addEventListener('click', handleClick, false);
125
+ form.addEventListener('click', listener, false);
106
126
 
107
127
  }
108
128
 
@@ -114,7 +134,7 @@
114
134
 
115
135
  ```
116
136
 
117
- - [click イベントと併用して submit イベントハンドラ関数内で input[type=submit] を得る - JSFiddle](http://jsfiddle.net/wz8e2enL/3/)
137
+ - [click イベントと併用して submit イベントハンドラ関数内で input[type=submit] を得る - JSFiddle](http://jsfiddle.net/wz8e2enL/5/)
118
138
 
119
139
 
120
140
 
@@ -127,3 +147,9 @@
127
147
  `click` イベントを併用するコードを追記しました。
128
148
 
129
149
  現状ではこのコードが最善だと思っていますが、更にスマートな方法を求めています。
150
+
151
+
152
+
153
+ **(2015/11/26 21:20追記)**
154
+
155
+ `listener` オブジェクトを共有する事で `handleSubmit` 上位スコープに `listner` オブジェクトを置かなくて済むようにコードを修正しました。

3

handleSubmit で this を使うように修正\(handleEvent\)

2015/11/26 13:21

投稿

think49
think49

スコア18164

test CHANGED
File without changes
test CHANGED
@@ -48,6 +48,8 @@
48
48
 
49
49
  ```JavaScript
50
50
 
51
+ 'use strict';
52
+
51
53
  (function () {
52
54
 
53
55
  var submitListener = {
@@ -62,13 +64,13 @@
62
64
 
63
65
  function handleSubmit (event) {
64
66
 
65
- console.log(event.type, submitListener.submit);
67
+ console.log(event.type, this.submit);
66
68
 
67
69
  console.log(event.type, 'activeElement', event.target.ownerDocument.activeElement);
68
70
 
69
71
  event.preventDefault();
70
72
 
71
- submitListener.submit = null;
73
+ this.submit = null;
72
74
 
73
75
  }
74
76
 
@@ -112,7 +114,7 @@
112
114
 
113
115
  ```
114
116
 
115
- - [click イベントと併用して submit イベントハンドラ関数内で input[type=submit] を得る - JSFiddle](http://jsfiddle.net/wz8e2enL/2/)
117
+ - [click イベントと併用して submit イベントハンドラ関数内で input[type=submit] を得る - JSFiddle](http://jsfiddle.net/wz8e2enL/3/)
116
118
 
117
119
 
118
120
 

2

clickイベントを併用するコードを追記\(input\[type=text\] で Enter を押す submit にも対応しています\)

2015/11/24 12:48

投稿

think49
think49

スコア18164

test CHANGED
@@ -1 +1 @@
1
- `submit` イベントハンドラ関数の中で `<input type="submit">` を得るには？
1
+ submitイベントハンドラ関数の中で <input type="submit"> を得るには？
test CHANGED
@@ -6,9 +6,15 @@
6
6
 
7
7
  <form>
8
8
 
9
- <input type="submit" value="submit1">
9
+ <p><input type="text" name="id"></p>
10
10
 
11
+ <p>
12
+
13
+ <input type="submit" value="submit1">
14
+
11
- <input type="submit" value="submit2">
15
+ <input type="submit" value="submit2">
16
+
17
+ </p>
12
18
 
13
19
  </form>
14
20
 
@@ -32,10 +38,90 @@
32
38
 
33
39
 
34
40
 
35
- ([Edit fiddle - JSFiddle](http://jsfiddle.net/wz8e2enL/)にサンプルをUPしました。)
41
+ - [submitイベントハンドラ関数内で input[type=submit] を参照したい - JSFiddle](http://jsfiddle.net/wz8e2enL/)
36
42
 
37
43
 
38
44
 
39
45
  `click` イベントで得られるのは分かりますが、`submit` イベントハンドラ関数のスコープに引き渡す為に面倒な手順が必要になるので積極的に使いたくはありません。
40
46
 
47
+
48
+
49
+ ```JavaScript
50
+
51
+ (function () {
52
+
53
+ var submitListener = {
54
+
55
+ handleEvent: handleSubmit,
56
+
57
+ submit: null
58
+
59
+ };
60
+
61
+
62
+
63
+ function handleSubmit (event) {
64
+
65
+ console.log(event.type, submitListener.submit);
66
+
67
+ console.log(event.type, 'activeElement', event.target.ownerDocument.activeElement);
68
+
69
+ event.preventDefault();
70
+
71
+ submitListener.submit = null;
72
+
73
+ }
74
+
75
+
76
+
77
+ function handleClick (event) {
78
+
79
+ var input = event.target;
80
+
81
+
82
+
83
+ if (input.tagName === 'INPUT' && input.type === 'submit') {
84
+
85
+ submitListener.submit = input;
86
+
87
+ console.log(event.type, input);
88
+
89
+ }
90
+
91
+ }
92
+
93
+
94
+
95
+ function main () {
96
+
97
+ var form = document.querySelector('form');
98
+
99
+
100
+
101
+ form.addEventListener('submit', submitListener, false);
102
+
103
+ form.addEventListener('click', handleClick, false);
104
+
105
+ }
106
+
107
+
108
+
109
+ main();
110
+
111
+ }());
112
+
113
+ ```
114
+
115
+ - [click イベントと併用して submit イベントハンドラ関数内で input[type=submit] を得る - JSFiddle](http://jsfiddle.net/wz8e2enL/2/)
116
+
117
+
118
+
41
119
  何かスマートな解決法がないものでしょうか。
120
+
121
+
122
+
123
+ **(2015/11/24 21:36追記)**
124
+
125
+ `click` イベントを併用するコードを追記しました。
126
+
127
+ 現状ではこのコードが最善だと思っていますが、更にスマートな方法を求めています。

1

event\.type が click だったので submit に修正

2015/11/24 12:36

投稿

think49
think49

スコア18164

test CHANGED
File without changes
test CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
  'use strict';
18
18
 
19
- document.querySelector('form').addEventListener('click', function (event) {
19
+ document.querySelector('form').addEventListener('submit', function (event) {
20
20
 
21
21
  // ここで submit ボタンを取得したい
22
22