JavaScript ActiveElement 是 Safari 的表单而不是按钮答案

【问题标题】：JavaScript ActiveElement is form not button with SafariJavaScript ActiveElement 是 Safari 的表单而不是按钮
【发布时间】：2017-02-02 21:50:30
【问题描述】：

我的网站上有一个带有 JS/AJAX 的表单列表，可以在点击时提交表单。 JavaScript 根据活动元素确定提交类型。这在多个浏览器中一直有效。

问题：基本上，MAC 上的 Safari（版本 10.0.2）将 activeElement 视为表单而不是按钮，因此 getAttribute 返回 null。有没有办法获得点击的元素？我需要知道用户点击了哪个按钮。

HTML 东西：

<div id="#Records">
<form action="update.php" method="post">
  ...
  <input name="submit" type="submit" data-action="send" value="send stuff" />
  <input name="submit" type="submit" data-action="update" value="update" />
  <input name="submit" type="submit" data-action="delete" value="delete" />
</form>
</div>

JavaScript 的东西

    $("#Records form").submit(function (e) {
        e.preventDefault();
        var url = this.action;
        var data = $(this).serializeArray();
        var action = document.activeElement.getAttribute('data-action');
        data.push({ name: 'submit', value: action });

        $.ajax({
            type: "POST",
            data: data,
            cache: false,
            url: url
        }).done(function (data) {
            $("#Records").html(data);
        }).fail(function (result) {
            ShowMessage("Error updating record!");
        });

        return false;
    });

【问题讨论】：

不要使用多个提交按钮。改用按钮按钮。
可能与此相关：stackoverflow.com/questions/41841688/…，（检查问题下方的 cmets），FF 根本没有设置 activeElement（它保留正文）。但是@TinyGiant 是对的，这里不要使用提交按钮，因为你没有 no-script 后备，使用submit 没有意义。

标签： javascript jquery html ajax forms

【解决方案1】：

你不能使用 e.currentTarget 而不是活动元素来获取元素吗？类似的东西

var action = $(e.currentTarget).attr('data-action');

（我假设按钮点击导致提交）

【讨论】：

$(e.currentTarget) 是表单，由于表单没有该属性，因此它将不起作用。基本上同样的问题。

【解决方案2】：

好的，基于 Tiny Giant 和其他 cmets，我已将代码更改为此。不确定这是不是最好的方法，但似乎在我测试过的所有地方都有效。

注意简化，欢迎 cmets

HTML

<div id="#Records">
 <form action="update.php" method="post">
  ...
  <input type="button" onclick="return $(this).processRequest(this, 'send');" data-action="send" value="send stuff" />
  <input type="button" onclick="return $(this).processRequest(this, 'update');" data-action="update" value="update" />
  <input type="button" onclick="return $(this).processRequest(this, 'delete');" data-action="delete" value="delete" />
 </form>
</div>

JavaScript

jQuery.fn.processRequest =
function(button, action)
{
    var form = $(button).parents('form');
    var url = form[0].action;
    var data = $(form).serializeArray()
    data.push({ name: 'submit', value: action });

    $.ajax({
        type: "POST",
        data: data,
        cache: false,
        url: url
    }).done(function (data) {
        $("#Records").html(data);
    }).fail(function (result) {
        ShowMessage("Error updating record!");
    });

    return false;
}

【讨论】：