要素の外側のクリックを検出するにはどうすればよいですか？
この質問が非常に人気があり、非常に多くの回答がある理由は、一見複雑なためです。ほぼ8年と数十の回答を経て、アクセシビリティにほとんど注意が払われていないことに本当に驚いています。
ユーザーがメニュー領域の外側をクリックしたときに、これらの要素を非表示にしたいと思います。
これは高貴な原因であり、実際問題です。質問のタイトル（ほとんどの回答が対処しようとしているように見えるもの）には、不幸な赤いニシンが含まれています。
ヒント：「クリック」という言葉ですです。
実際にはクリックハンドラーをバインドする必要はありません。
クリックハンドラーをバインドしてダイアログを閉じる場合は、既に失敗しています。失敗した理由は、誰もが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>
そのデモを1分以上プレイすると、すぐに問題が発生し始めます。
1つ目は、ダイアログ内のリンクがクリックできないことです。それをクリックするか、タブをクリックすると、対話が行われる前にダイアログが閉じます。これは、内側の要素にフォーカス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>
2番目の問題は、リンクが再度押されたときにダイアログが閉じないことです。これは、ダイアログがフォーカスを失い、閉じる動作をトリガーした後、リンクのクリックがダイアログをトリガーして再度開くためです。
前の問題と同様に、フォーカス状態を管理する必要があります。状態変更はすでにキューに入れられているので、ダイアログトリガーでフォーカスイベントを処理するだけです。
これはおなじみのはずです
$('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の役割と属性についての説明は避けますが、詳細については、仕様を参照することを強くお勧めします彼らが使用すべき役割とその他の適切な属性について。