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

2024-01-02

在我正在编写的网站中,需要在发生某些事情之前显示一些确认文本。我使用的解决方案在单击按钮时显示一个模式窗口,当窗口关闭时,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 中测试了上述内容,一切都按照我的预期工作 - 当模式窗口关闭时,只有按下“确定”按钮,用户才会注销,单击其他任何地方都会让您退出登录。

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

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

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


From mdn https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement:注意:在 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

document.ActiveElement 不返回 Safari 中的活动元素 的相关文章

随机推荐