Question

该表单使用具有不同行为的多个提交按钮。单击该按钮时，将引发Submit事件。是否可以从事件处理程序中找出按下了哪个按钮？

<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>)

Answer 1

您可以为多个按钮<input type="button"/>添加不同的点击处理程序，但是如果您确实需要触发Submit事件，我建议您使用数据标签

将此添加到您的输入标签 data-formaction="exampleValue"

您可以在事件处理程序中使用exampleValue来访问event.target.dataset.formaction值

Answer 2

点击事件通常有两个目标-.target是被单击的元素，而.currentTarget是捕获事件的元素（在本例中为表单）。

出于您的目的，我建议使用event.target。一种常见的模式是为按钮提供name属性，因此您可以找到event.target.name来确定按下了哪个按钮。

请记住，如果您的按钮包含任何复杂的东西（例如图标），这将出错，因为那样的话，图标元素将成为目标。

如何在javascript中跟踪Submit事件的发起者？

2 个答案: