document.ActiveElement 不返回 Safari 中的活动元素

Question

在我正在编写的网站中，需要在某些事情发生之前显示一些确认文本。我正在使用的解决方案在按钮单击时显示一个模式窗口，当窗口关闭时，Jquery 会查看单击了哪个按钮。

所以我有以下的注销确认

$(function () {
    $('#logOut').on('click', function () {
        url = $(this).data('request-url');
        $('#modalLogout').modal('show');
    });

    $('#modalLogout').on('hide.bs.modal', function () {
        var activeElement = $(document.activeElement);

        if (activeElement.is('[data-toggle], [data-dismiss]')) {
            if (activeElement[0].id === "LogoutOk") {
                window.location.href = url;
            }
        }
    });
});

和模态窗口

<div id="modalLogout" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
        <div class="modal-body">
            <p>Do you want to log out?</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal" id="LogoutCancel">Cancel</button>
            <button type="button" class="btn btn-warning" data-dismiss="modal" id="LogoutOk">OK</button>
        </div>
    </div>
</div>
</div>

在 Windows 中，我在 IE、Edge、Firefox 和 Chrome 中测试了上述内容，并且一切正常 - 当模式窗口关闭时，只有按下 OK 按钮，用户才会注销，点击其他任何地方将让您保持登录状态。

在使用 Safari 的 Mac 上，单击“确定”不会执行任何操作。查看控制台，问题似乎是$(document.activeElement)。在 Windows 浏览器中，这将返回被单击的按钮，在 Safari 中，我得到以 <body> 开头的整个网页。

在网上阅读似乎有（少量）关于 Safari 中的 activeElement 主题的讨论，但如果很多人都在做类似的事情，就没有我预期的那么多。我看过的所有解决方案都不适用于我的情况。

有没有办法在 Safari 中获取被点击的按钮，或者有没有更好的方法来实现我在所有浏览器中都可以使用的功能？

Answer 1

来自mdn：注意：在 Mac 上，不是文本输入元素的元素往往不会获得焦点。

因此，您可以从以下位置更改事件处理程序：

$('#modalLogout').on('hide.bs.modal', function () {
    var activeElement = $(document.activeElement);

给委托人：

$('#modalLogout').on('click', '#LogoutOk', function (e) {
    var activeElement = $(e.target);

$('#logOut').on('click', function () {
    url = $(this).data('request-url');
    $('#modalLogout').modal('show');
});

$('#modalLogout').on('click', '#LogoutOk', function (e) {
      console.log('LogoutOk: ' + url);
      window.location.href = url;
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-primary btn-lg" id="logOut" data-request-url="http://www.google.it">
    Launch demo modal
</button>
<div id="modalLogout" class="modal fade" role="dialog">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <p>Do you want to log out?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" id="LogoutCancel">Cancel</button>
                <button type="button" class="btn btn-warning" data-dismiss="modal" id="LogoutOk">OK</button>
            </div>
        </div>
    </div>
</div>