如何检测元素外部的点击？
这个问题之所以如此流行并且答案如此之多，是因为它看似复杂。经过将近八年的时间和数十个答案，我真的很惊讶地看到对可访问性的关注很少。
当用户在菜单区域之外单击时，我想隐藏这些元素。
这是一个崇高的原因，是实际的问题。问题的标题（即大多数答案似乎试图解决的问题）包含不幸的鲱鱼。
提示：这是“点击”一词！
您实际上并不想绑定点击处理程序。
如果要绑定单击处理程序以关闭对话框，则您已经失败了。您失败的原因是，并非所有人都触发click事件。不使用鼠标的用户将可以通过按来退出对话框（并且弹出菜单可以说是对话框的一种）Tab，然后他们将无法在不触发click事件的情况下读取对话框后面的内容。
因此，让我们改一下这个问题。
用户完成操作后如何关闭对话框？
这是目标。不幸的是，现在我们需要绑定userisfinishedwiththedialog事件，而且绑定不是那么简单。
那么我们如何才能检测到用户已完成使用对话框？
focusout 事件
一个很好的开始是确定焦点是否已离开对话框。
提示：请注意blur事件，blur如果事件绑定到冒泡阶段，则不会传播！
jQuery的效果focusout很好。如果您不能使用jQuery，则可以blur在捕获阶段使用：
element.addEventListener('blur', ..., true);
// use capture: ^^^^
同样，对于许多对话框，您将需要允许容器获得焦点。添加tabindex="-1"以允许对话框动态接收焦点，而不会中断制表流程。
$('a').on('click', function () {
$(this.hash).toggleClass('active').focus();
});
$('div').on('focusout', function () {
$(this).removeClass('active');
});
div {
display: none;
}
.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#example">Example</a>
<div id="example" tabindex="-1">
Lorem ipsum <a href="http://example.com">dolor</a> sit amet.
</div>
如果您在演示中玩了超过一分钟，则应该很快开始发现问题。
首先是对话框中的链接不可单击。尝试单击它或它的选项卡将导致对话框在发生交互之前关闭。这是因为聚焦内部元素会focusout在focusin再次触发事件之前触发事件。
解决方法是在状态循环上排队状态更改。这可以通过使用setImmediate(...)或setTimeout(..., 0)针对不支持的浏览器来完成setImmediate。排队后，可以通过后续操作将其取消focusin：
$('.submenu').on({
focusout: function (e) {
$(this).data('submenuTimer', setTimeout(function () {
$(this).removeClass('submenu--active');
}.bind(this), 0));
},
focusin: function (e) {
clearTimeout($(this).data('submenuTimer'));
}
});
$('a').on('click', function () {
$(this.hash).toggleClass('active').focus();
});
$('div').on({
focusout: function () {
$(this).data('timer', setTimeout(function () {
$(this).removeClass('active');
}.bind(this), 0));
},
focusin: function () {
clearTimeout($(this).data('timer'));
}
});
div {
display: none;
}
.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#example">Example</a>
<div id="example" tabindex="-1">
Lorem ipsum <a href="http://example.com">dolor</a> sit amet.
</div>
第二个问题是当再次按下链接时，对话框不会关闭。这是因为对话框失去焦点，触发了关闭行为，然后单击链接会触发对话框重新打开。
与上一期类似，需要管理焦点状态。鉴于状态更改已经排队，仅需处理对话框触发器上的焦点事件：
这看起来应该很熟悉
$('a').on({
focusout: function () {
$(this.hash).data('timer', setTimeout(function () {
$(this.hash).removeClass('active');
}.bind(this), 0));
},
focusin: function () {
clearTimeout($(this.hash).data('timer'));
}
});
$('a').on('click', function () {
$(this.hash).toggleClass('active').focus();
});
$('div').on({
focusout: function () {
$(this).data('timer', setTimeout(function () {
$(this).removeClass('active');
}.bind(this), 0));
},
focusin: function () {
clearTimeout($(this).data('timer'));
}
});
$('a').on({
focusout: function () {
$(this.hash).data('timer', setTimeout(function () {
$(this.hash).removeClass('active');
}.bind(this), 0));
},
focusin: function () {
clearTimeout($(this.hash).data('timer'));
}
});
div {
display: none;
}
.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#example">Example</a>
<div id="example" tabindex="-1">
Lorem ipsum <a href="http://example.com">dolor</a> sit amet.
</div>
Esc 键
如果您认为已经通过处理焦点状态完成了操作，则可以做更多的事情来简化用户体验。
这通常是一个“很不错”的功能，但是很常见的是，当您拥有任何形式的模式或弹出窗口时，Esc键会将其关闭。
keydown: function (e) {
if (e.which === 27) {
$(this).removeClass('active');
e.preventDefault();
}
}
$('a').on('click', function () {
$(this.hash).toggleClass('active').focus();
});
$('div').on({
focusout: function () {
$(this).data('timer', setTimeout(function () {
$(this).removeClass('active');
}.bind(this), 0));
},
focusin: function () {
clearTimeout($(this).data('timer'));
},
keydown: function (e) {
if (e.which === 27) {
$(this).removeClass('active');
e.preventDefault();
}
}
});
$('a').on({
focusout: function () {
$(this.hash).data('timer', setTimeout(function () {
$(this.hash).removeClass('active');
}.bind(this), 0));
},
focusin: function () {
clearTimeout($(this.hash).data('timer'));
}
});
div {
display: none;
}
.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#example">Example</a>
<div id="example" tabindex="-1">
Lorem ipsum <a href="http://example.com">dolor</a> sit amet.
</div>
如果知道对话框中有可聚焦的元素，则无需直接聚焦对话框。如果要构建菜单，则可以将焦点放在第一个菜单项上。
click: function (e) {
$(this.hash)
.toggleClass('submenu--active')
.find('a:first')
.focus();
e.preventDefault();
}
$('.menu__link').on({
click: function (e) {
$(this.hash)
.toggleClass('submenu--active')
.find('a:first')
.focus();
e.preventDefault();
},
focusout: function () {
$(this.hash).data('submenuTimer', setTimeout(function () {
$(this.hash).removeClass('submenu--active');
}.bind(this), 0));
},
focusin: function () {
clearTimeout($(this.hash).data('submenuTimer'));
}
});
$('.submenu').on({
focusout: function () {
$(this).data('submenuTimer', setTimeout(function () {
$(this).removeClass('submenu--active');
}.bind(this), 0));
},
focusin: function () {
clearTimeout($(this).data('submenuTimer'));
},
keydown: function (e) {
if (e.which === 27) {
$(this).removeClass('submenu--active');
e.preventDefault();
}
}
});
.menu {
list-style: none;
margin: 0;
padding: 0;
}
.menu:after {
clear: both;
content: '';
display: table;
}
.menu__item {
float: left;
position: relative;
}
.menu__link {
background-color: lightblue;
color: black;
display: block;
padding: 0.5em 1em;
text-decoration: none;
}
.menu__link:hover,
.menu__link:focus {
background-color: black;
color: lightblue;
}
.submenu {
border: 1px solid black;
display: none;
left: 0;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 100%;
}
.submenu--active {
display: block;
}
.submenu__item {
width: 150px;
}
.submenu__link {
background-color: lightblue;
color: black;
display: block;
padding: 0.5em 1em;
text-decoration: none;
}
.submenu__link:hover,
.submenu__link:focus {
background-color: black;
color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li class="menu__item">
<a class="menu__link" href="#menu-1">Menu 1</a>
<ul class="submenu" id="menu-1" tabindex="-1">
<li class="submenu__item"><a class="submenu__link" href="http://example.com/#1">Example 1</a></li>
<li class="submenu__item"><a class="submenu__link" href="http://example.com/#2">Example 2</a></li>
<li class="submenu__item"><a class="submenu__link" href="http://example.com/#3">Example 3</a></li>
<li class="submenu__item"><a class="submenu__link" href="http://example.com/#4">Example 4</a></li>
</ul>
</li>
<li class="menu__item">
<a class="menu__link" href="#menu-2">Menu 2</a>
<ul class="submenu" id="menu-2" tabindex="-1">
<li class="submenu__item"><a class="submenu__link" href="http://example.com/#1">Example 1</a></li>
<li class="submenu__item"><a class="submenu__link" href="http://example.com/#2">Example 2</a></li>
<li class="submenu__item"><a class="submenu__link" href="http://example.com/#3">Example 3</a></li>
<li class="submenu__item"><a class="submenu__link" href="http://example.com/#4">Example 4</a></li>
</ul>
</li>
</ul>
lorem ipsum <a href="http://example.com/">dolor</a> sit amet.
WAI-ARIA角色和其他辅助功能支持
这个答案有望涵盖此功能可访问的键盘和鼠标支持的基础知识，但是由于它已经相当大了，因此我将避免任何有关WAI-ARIA角色和属性的讨论，但是我强烈建议实现者参考该规范以获取详细信息。他们应该使用什么角色以及任何其他适当的属性。