開いた<body>状態で持っているとしましょうfull modal。このモーダルは、[ESC]キーを押すことで閉じることができます。この中full modalで、ユーザーは別の小さなモーダルを開くことができます。これは、[ESC]キーを押して閉じることもできます。[ESC]キーをどのように処理し、「上位」レイヤーを閉じて、キー押下が伝播しないようにし、キー押下をリッスンしている他のレイヤーを閉じますか？
私はpreventDefaultなどを使用して、正解を期待しています。どのレイヤーを閉じるかを決定する前に多くのチェックを行うようなサービスをセットアップすることは考えていません。私にとって、これはクリックイベントのように機能するはずです。 、上向きに伝播します。これは実行可能ですか？
.preventDefault()他のハンドラーに干渉しないモーダル専用のイベントリスナーをアタッチするたびに新しいハンドラーを作成する場合を除いて、イベントリスナーのバブリングをブロックすることを妨げるストレートまたはブラックマジックはありません。
ハンドラーの配列と多数のイベントリスナーを使用する代わりに、配列内にモーダルをスタックしてから、それらを1つずつ破棄してみませんか？
これは私が考えることができる最短のコードです。ステップバイステップの説明については、コード内のコメントを参照してください。
// Global variable, we use this to store DOM objects.
var modalStack = [];
// My function to create/open my modals.
function openModal() {
var modalHTML = '<div id="modal-'+modalStack.length+'" class="modal"><button onclick="openModal()">Open modal '+(modalStack.length+1)+'</button></div>'; // I populate the modal with my stuff and assign it an ID containing the current stack size.
document.body.insertAdjacentHTML( 'beforeend', modalHTML ); // Add into the body
modalStack.push( document.getElementById('modal-'+modalStack.length) ); // And push my DOM object I just created into the array.
}
// My ESC event listener
window.addEventListener('keyup', function(event) {
var lastIndex = modalStack.length-1; // This gets the last element on the stack.
if (event.keyCode == 27 && lastIndex >= 0) {
var thisModal = modalStack[ lastIndex ]; // Just to make sense, I could've called the removeChild directly from the array.
thisModal.parentNode.removeChild(thisModal); // Destroy the current element.
modalStack.pop(); // Remove the associated last DOM object from the array.
}
}, false);
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加