javascript - 如何在 JavaScript 中检测两个按钮中哪一个调用了函数

Question

我正在使用 ASP.NET MVC 5 和 Ajax 表单。表单发布可以通过两个不同的按钮触发。 OnBegin 选项用于在表单发布之前调用函数。

形式为:

@using (Ajax.BeginForm("NewCoreCase", "CaseStart", null, new AjaxOptions()
    {
        HttpMethod = "POST",
        OnBegin = "newCaseValidate",
        OnSuccess = "newCaseClose"
    }
    , new { id = "CaseStartForm" }
    ))
{
    <div class="form-actions">
        <button type="submit" id="save-asis" class="btn cancel" formnovalidate>Save</button>
        <button type="submit" id="save-all" class="btn btn-primary" >Validate and save</button>
    </div>
}

在 JavaScript 函数 newCaseValidate 中，如何检测单击了两个按钮中的哪一个？

Answer 1

这取决于您的 newCaseValidate 附加到的位置。如果它附加到整个表单并且正在监听整个表单上的 click 事件，则可以使用作为 newCaseValidate 第一个参数提供的事件对象监听器，所以它看起来像这样:

function newCaseValidate(evt) {
    var target = evt.target; // target is the actual element that was clicked, in your case one of the buttons

    // check if button element was clicked as your form may have other elements
    if(target.nodeName !== 'BUTTON') return;

    // then you make use of button id
    if(target.id === 'save-asis') {
       // do something for save-asis
    }
    else if(target.id === 'save-asis') {
       // do something for save-all
    }
}

已编辑:

由于我们知道 newCaseValidate 不是直接点击监听器，因此以下逻辑应该可以满足您的要求:

将 newCaseValidate 调整为:

        function newCaseValidate(evt) {
            var buttons = evt.target.getElementsByTagName('button'); // evt.target is the form
            var clickedId;

            // go through all buttons that are in the form and find one that has data-clicked set to true
            for(var i = buttons.length - 1; i >= 0; i--) {
                if(buttons[i].dataset.clicked === 'true') {
                    clickedId = buttons[i].id;

                    break;
                }
            }

            // then you make use of button id
            if(clickedId === 'save-asis') {
               // do something for save-asis
            }
            else if(clickedId === 'save-asis') {
               // do something for save-all
            }
        }

然后调整你的html代码:

    <div class="form-actions" onclick="markClickedButton(this, event)">
        <button type="submit" id="save-asis" class="btn cancel" formnovalidate>Save</button>
        <button type="submit" id="save-all" class="btn btn-primary" >Validate and save</button>
    </div>

    <script type="text/javascript">
        function markClickedButton(element, evt) {
            var buttons = element.getElementsByTagName('button');
            var target = evt.target;

            // if form-actions 
            if(target.nodeName !== "BUTTON") return;

            // first reset all markers to default value
            for(var i = buttons.length - 1; i >= 0; i--) {
               buttons[i].dataset.clicked = false;
            }

            // now mark the button that was clicked
            target.dataset.clicked = true
        }
    </script>

上面的代码执行以下操作: 它将内联点击监听器 markClickedButton 添加到 form-actions div。此监听器使用数据单击属性来标记单击的按钮。然后在 newCaseValidate 中，您会找到一个用于提交和提取其 ID 的按钮。