- 首页
- 其他开发
- document.ActiveElement 不返回 Safari 中的活动元素
document.ActiveElement 不返回 Safari 中的活动元素
[英] document.ActiveElement not returning the active element in Safari
本文介绍了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 class="modal-dialog modal-sm" role="document"><div class="modal-content"><div class="modal-body"><p>您要退出吗?</p>
<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal" id="LogoutCancel">取消</button><button type="button" class="btn btn-warning" data-dismiss="modal" id="LogoutOk">OK</button>
在 Windows 中，我已经在 IE、Edge、Firefox 和 Chrome 中测试了上述内容，并且一切都按我的预期工作 - 当模式窗口关闭时，只有按下 OK 按钮，点击其他任何地方，用户才会注销会让你保持登录状态.
在使用 Safari 的 Mac 上，单击确定"不会执行任何操作.查看控制台，问题似乎出在 $(document.activeElement) 上.在 Windows 浏览器中，这将返回被点击的按钮，在 Safari 中，我得到了以
在网上阅读似乎对 Safari 中的 activeElement 主题进行了(少量)讨论，但如果很多人都在做类似的事情，则没有我预期的那么多.我看过的所有解决方案都不适用于我的情况.
有没有办法在 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">启动演示模式<div id="modalLogout" class="modalfade" role="dialog"><div class="modal-dialog modal-sm" role="document"><div class="modal-content"><div class="modal-body"><p>您要退出吗?</p>
<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal" id="LogoutCancel">取消</button><button type="button" class="btn btn-warning" data-dismiss="modal" id="LogoutOk">OK</button>
In the web site I am writing there is the need for some confirmation text to be shown before something happens. The solution I am using shows a modal window on the button click and when the window is closed the Jquery looks at which button was clicked.
So I have the following for a logout confirmation
$(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;
}
}
});
});
and the modal window
<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>
In windows I have tested the above in IE, Edge, Firefox and Chrome and it all works as I would expect it to - when the modal window closes the user is logged out only if the OK button was pressed, clicking anywhere else will leave you logged in.
On a Mac using Safari, clicking OK will do nothing. Looking at the console, the problem appears to be the $(document.activeElement). In a windows browser this will return the button that was clicked, in Safari I get the the whole web page starting with the <body>.
Reading around the net there seems to be a (small) amount of discussion on the subject of activeElement in Safari, but not as much as I would expect if a lot of people are doing something similar. None of the solutions I have looked at are applicable in my case.
Is there a way to get the clicked button in Safari, or is there a better way to achieve what I am after that will work in all browsers?
解决方案
From mdn: Note: On Mac, elements that aren't text input elements tend not to get focus assigned to them.
Hence, you can change your event handler from:
$('#modalLogout').on('hide.bs.modal', function () {
var activeElement = $(document.activeElement);
to the delegated one:
$('#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>
这篇关于document.ActiveElement 不返回 Safari 中的活动元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
