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

在网站上，我正在编写，需要在发生某些问题之前显示一些确认文本。我正在使用的解决方案在按钮上显示一个模态窗口，当窗口关闭时，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按钮时将用户登录时，请单击其他任何地方，请单击会让您登录。

在Mac上使用Safari，单击OK将无能为力。查看控制台，问题似乎是$(document.activeElement)。在Windows浏览器中，这将返回单击的按钮，在Safari中，我从<body>开始获取整个网页。

在网上阅读，似乎在野生动物园中就积极元素的主题进行了一小段讨论，但如果很多人在做类似的事情，我期望的不如我期望的那样。我看过的解决方案都不适用于我的情况。

有没有办法在Safari中获取单击按钮，或者有更好的方法可以在所有浏览器中使用我之后的工作？

来自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>

相关内容

最新更新

热门标签：