Как отследить инициатора события отправки в javascript? - PullRequest
0 голосов
/ 28 января 2019

Форма использует несколько кнопок отправки с разным форматированием.При нажатии кнопки происходит событие отправки.Можно ли из обработчика событий узнать, какая кнопка была нажата?

<html>
        <body>
            <form>
                <button formaction="1">1</button>
                <button formaction="2">2</button>
            </form>
            <script>
                var form = document.querySelector('form');
                form.addEventListener('submit', function(event) {
                    event.preventDefault();
                    var formaction = '?';
                    alert(formaction);
                });
            </script>
        </body>
    </html>

UPD.Протестированные варианты:

event.target - <form>
event.srcElement - <form>
event.currentTarget - <form>
event.originalTarget - udefined (FF <form>)
document.activeElement - <button> (Safari <body>)
event.explicitOriginalTarget - udefined (FF <button>)

Ответы [ 2 ]

0 голосов
/ 28 января 2019

Вы можете добавить разные обработчики кликов для нескольких кнопок <input type="button"/>, но если вам действительно нужно инициировать событие отправки, я бы порекомендовал использовать теги данных

Добавить это в свой тег ввода data-formaction="exampleValue"

Вы можете получить доступ к значению exampleValue, используя: event.target.dataset.formaction внутри вашего обработчика событий

0 голосов
/ 28 января 2019

События клика обычно имеют две цели - .target, который является элементом, по которому был выполнен щелчок, и .currentTarget, который является элементом, который захватил событие (в данном случае, формой).

Для ваших целей я предлагаю использовать event.target.Обычный шаблон - присвоить вашей кнопке атрибут name, чтобы вы могли найти do event.target.name, чтобы выяснить, какая кнопка была нажата.

Имейте в виду, что если ваша кнопка содержит что-то, она будет работать неправильносложный, как значок, потому что тогда его значок будет целью.

...