質問するログイン新規登録

質問編集履歴

5

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

2015/12/02 12:38

投稿

think49
think49

スコア18194

title CHANGED
File without changes
body CHANGED
@@ -75,4 +75,9 @@
75
75
  現状ではこのコードが最善だと思っていますが、更にスマートな方法を求めています。
76
76
 
77
77
  **(2015/11/26 21:20追記)**
78
- `listener` オブジェクトを共有する事で `handleSubmit` 上位スコープに `listner` オブジェクトを置かなくて済むようにコードを修正しました。
78
+ `listener` オブジェクトを共有する事で `handleSubmit` 上位スコープに `listner` オブジェクトを置かなくて済むようにコードを修正しました。
79
+
80
+ **(2015/12/02 21:38追記)**
81
+ eripong さんに Firefox 独自拡張の `event.explicitOriginalTarget` を紹介して頂きました。
82
+ - [Event.explicitOriginalTarget - Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/Event/explicitOriginalTarget)
83
+ - [click イベントと併用して submit イベントハンドラ関数内で input[type=submit] を得る - JSFiddle](http://jsfiddle.net/wz8e2enL/6/)

4

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

2015/12/02 12:38

投稿

think49
think49

スコア18194

title CHANGED
File without changes
body CHANGED
@@ -25,11 +25,6 @@
25
25
  ```JavaScript
26
26
  'use strict';
27
27
  (function () {
28
- var submitListener = {
29
- handleEvent: handleSubmit,
30
- submit: null
31
- };
32
-
33
28
  function handleSubmit (event) {
34
29
  console.log(event.type, this.submit);
35
30
  console.log(event.type, 'activeElement', event.target.ownerDocument.activeElement);
@@ -41,25 +36,43 @@
41
36
  var input = event.target;
42
37
 
43
38
  if (input.tagName === 'INPUT' && input.type === 'submit') {
44
- submitListener.submit = input;
39
+ this.submit = input;
45
40
  console.log(event.type, input);
46
41
  }
47
42
  }
48
43
 
44
+ function handleClickSubmit (event) {
45
+ switch (event.type) {
46
+ case 'click':
47
+ handleClick.call(this, event);
48
+ break;
49
+ case 'submit':
50
+ handleSubmit.call(this, event);
51
+ break;
52
+ }
53
+ }
54
+
49
55
  function main () {
50
- var form = document.querySelector('form');
56
+ var form = document.querySelector('form'),
57
+ listener = {
58
+ handleEvent: handleClickSubmit,
59
+ submit: null
60
+ };
51
61
 
52
- form.addEventListener('submit', submitListener, false);
62
+ form.addEventListener('submit', listener, false);
53
- form.addEventListener('click', handleClick, false);
63
+ form.addEventListener('click', listener, false);
54
64
  }
55
65
 
56
66
  main();
57
67
  }());
58
68
  ```
59
- - [click イベントと併用して submit イベントハンドラ関数内で input[type=submit] を得る - JSFiddle](http://jsfiddle.net/wz8e2enL/3/)
69
+ - [click イベントと併用して submit イベントハンドラ関数内で input[type=submit] を得る - JSFiddle](http://jsfiddle.net/wz8e2enL/5/)
60
70
 
61
71
  何かスマートな解決法がないものでしょうか。
62
72
 
63
73
  **(2015/11/24 21:36追記)**
64
74
  `click` イベントを併用するコードを追記しました。
65
- 現状ではこのコードが最善だと思っていますが、更にスマートな方法を求めています。
75
+ 現状ではこのコードが最善だと思っていますが、更にスマートな方法を求めています。
76
+
77
+ **(2015/11/26 21:20追記)**
78
+ `listener` オブジェクトを共有する事で `handleSubmit` 上位スコープに `listner` オブジェクトを置かなくて済むようにコードを修正しました。

3

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

2015/11/26 13:21

投稿

think49
think49

スコア18194

title CHANGED
File without changes
body CHANGED
@@ -23,6 +23,7 @@
23
23
  `click` イベントで得られるのは分かりますが、`submit` イベントハンドラ関数のスコープに引き渡す為に面倒な手順が必要になるので積極的に使いたくはありません。
24
24
 
25
25
  ```JavaScript
26
+ 'use strict';
26
27
  (function () {
27
28
  var submitListener = {
28
29
  handleEvent: handleSubmit,
@@ -30,10 +31,10 @@
30
31
  };
31
32
 
32
33
  function handleSubmit (event) {
33
- console.log(event.type, submitListener.submit);
34
+ console.log(event.type, this.submit);
34
35
  console.log(event.type, 'activeElement', event.target.ownerDocument.activeElement);
35
36
  event.preventDefault();
36
- submitListener.submit = null;
37
+ this.submit = null;
37
38
  }
38
39
 
39
40
  function handleClick (event) {
@@ -55,7 +56,7 @@
55
56
  main();
56
57
  }());
57
58
  ```
58
- - [click イベントと併用して submit イベントハンドラ関数内で input[type=submit] を得る - JSFiddle](http://jsfiddle.net/wz8e2enL/2/)
59
+ - [click イベントと併用して submit イベントハンドラ関数内で input[type=submit] を得る - JSFiddle](http://jsfiddle.net/wz8e2enL/3/)
59
60
 
60
61
  何かスマートな解決法がないものでしょうか。
61
62
 

2

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

2015/11/24 12:48

投稿

think49
think49

スコア18194

title CHANGED
@@ -1,1 +1,1 @@
1
- `submit` イベントハンドラ関数の中で `<input type="submit">` を得るには?
1
+ submitイベントハンドラ関数の中で <input type="submit"> を得るには?
body CHANGED
@@ -2,8 +2,11 @@
2
2
 
3
3
  ```HTML
4
4
  <form>
5
+ <p><input type="text" name="id"></p>
6
+ <p>
5
- <input type="submit" value="submit1">
7
+ <input type="submit" value="submit1">
6
- <input type="submit" value="submit2">
8
+ <input type="submit" value="submit2">
9
+ </p>
7
10
  </form>
8
11
  <script>
9
12
  'use strict';
@@ -15,7 +18,47 @@
15
18
  </script>
16
19
  ```
17
20
 
18
- ([Edit fiddle - JSFiddle](http://jsfiddle.net/wz8e2enL/)にサンプルをUPしました。)
21
+ - [submitイベントハンドラ関数内で input[type=submit] を参照したい - JSFiddle](http://jsfiddle.net/wz8e2enL/)
19
22
 
20
23
  `click` イベントで得られるのは分かりますが、`submit` イベントハンドラ関数のスコープに引き渡す為に面倒な手順が必要になるので積極的に使いたくはありません。
24
+
25
+ ```JavaScript
26
+ (function () {
27
+ var submitListener = {
28
+ handleEvent: handleSubmit,
29
+ submit: null
30
+ };
31
+
32
+ function handleSubmit (event) {
33
+ console.log(event.type, submitListener.submit);
34
+ console.log(event.type, 'activeElement', event.target.ownerDocument.activeElement);
35
+ event.preventDefault();
36
+ submitListener.submit = null;
37
+ }
38
+
39
+ function handleClick (event) {
40
+ var input = event.target;
41
+
42
+ if (input.tagName === 'INPUT' && input.type === 'submit') {
43
+ submitListener.submit = input;
44
+ console.log(event.type, input);
45
+ }
46
+ }
47
+
48
+ function main () {
49
+ var form = document.querySelector('form');
50
+
51
+ form.addEventListener('submit', submitListener, false);
52
+ form.addEventListener('click', handleClick, false);
53
+ }
54
+
55
+ main();
56
+ }());
57
+ ```
58
+ - [click イベントと併用して submit イベントハンドラ関数内で input[type=submit] を得る - JSFiddle](http://jsfiddle.net/wz8e2enL/2/)
59
+
21
- 何かスマートな解決法がないものでしょうか。
60
+ 何かスマートな解決法がないものでしょうか。
61
+
62
+ **(2015/11/24 21:36追記)**
63
+ `click` イベントを併用するコードを追記しました。
64
+ 現状ではこのコードが最善だと思っていますが、更にスマートな方法を求めています。

1

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

2015/11/24 12:36

投稿

think49
think49

スコア18194

title CHANGED
File without changes
body CHANGED
@@ -7,7 +7,7 @@
7
7
  </form>
8
8
  <script>
9
9
  'use strict';
10
- document.querySelector('form').addEventListener('click', function (event) {
10
+ document.querySelector('form').addEventListener('submit', function (event) {
11
11
  // ここで submit ボタンを取得したい
12
12
  console.log(event.type, event.target);
13
13
  event.preventDefault();