在我正在编写的网站中,需要在发生某些事情之前显示一些确认文本。我使用的解决方案在单击按钮时显示一个模式窗口,当窗口关闭时,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(使用前将#替换为@)