質問編集履歴
5
event\.explicitOriginalTarget の MDN リンク、サンプルコードリンク追加
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` オブジェクトを置かなくて済むようにコードを修正
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
|
-
|
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',
|
62
|
+
form.addEventListener('submit', listener, false);
|
53
|
-
form.addEventListener('click',
|
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/
|
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\)
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,
|
34
|
+
console.log(event.type, this.submit);
|
34
35
|
console.log(event.type, 'activeElement', event.target.ownerDocument.activeElement);
|
35
36
|
event.preventDefault();
|
36
|
-
|
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/
|
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 にも対応しています\)
title
CHANGED
@@ -1,1 +1,1 @@
|
|
1
|
-
|
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
|
-
|
7
|
+
<input type="submit" value="submit1">
|
6
|
-
|
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
|
-
|
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 に修正
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('
|
10
|
+
document.querySelector('form').addEventListener('submit', function (event) {
|
11
11
|
// ここで submit ボタンを取得したい
|
12
12
|
console.log(event.type, event.target);
|
13
13
|
event.preventDefault();
|