submit
イベントハンドラ関数の中で <input type="submit">
を得る方法はないでしょうか。
HTML
1<form> 2 <p><input type="text" name="id"></p> 3 <p> 4 <input type="submit" value="submit1"> 5 <input type="submit" value="submit2"> 6 </p> 7</form> 8<script> 9'use strict'; 10document.querySelector('form').addEventListener('submit', function (event) { 11 // ここで submit ボタンを取得したい 12 console.log(event.type, event.target); 13 event.preventDefault(); 14}, false); 15</script>
click
イベントで得られるのは分かりますが、submit
イベントハンドラ関数のスコープに引き渡す為に面倒な手順が必要になるので積極的に使いたくはありません。
JavaScript
1'use strict'; 2(function () { 3 function handleSubmit (event) { 4 console.log(event.type, this.submit); 5 console.log(event.type, 'activeElement', event.target.ownerDocument.activeElement); 6 event.preventDefault(); 7 this.submit = null; 8 } 9 10 function handleClick (event) { 11 var input = event.target; 12 13 if (input.tagName === 'INPUT' && input.type === 'submit') { 14 this.submit = input; 15 console.log(event.type, input); 16 } 17 } 18 19 function handleClickSubmit (event) { 20 switch (event.type) { 21 case 'click': 22 handleClick.call(this, event); 23 break; 24 case 'submit': 25 handleSubmit.call(this, event); 26 break; 27 } 28 } 29 30 function main () { 31 var form = document.querySelector('form'), 32 listener = { 33 handleEvent: handleClickSubmit, 34 submit: null 35 }; 36 37 form.addEventListener('submit', listener, false); 38 form.addEventListener('click', listener, false); 39 } 40 41 main(); 42}());
何かスマートな解決法がないものでしょうか。
(2015/11/24 21:36追記)
click
イベントを併用するコードを追記しました。
現状ではこのコードが最善だと思っていますが、更にスマートな方法を求めています。
(2015/11/26 21:20追記)
listener
オブジェクトを共有する事で handleSubmit
上位スコープに listner
オブジェクトを置かなくて済むようにコードを修正しました。
(2015/12/02 21:38追記)
eripong さんに Firefox 独自拡張の event.explicitOriginalTarget
を紹介して頂きました。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/11/25 13:46
2015/11/25 13:57
2015/11/26 01:58 編集
2015/11/26 13:25
2015/12/02 12:39