如何在单击模式外部时关闭弹出模式，同时能够向下箭头单选按钮？

Question

我正在尝试添加功能，以在用户单击模式外部时关闭模式。这个解决方案有效

const googleMissingInfoModal = document.getElementById('address-verification-modal');
googleMissingInfoModal.addEventListener('click', (e) => {
    const dialogDimensions = googleMissingInfoModal.getBoundingClientRect();
    if (e.clientX < dialogDimensions.left || e.clientX > dialogDimensions.right || e.clientY < dialogDimensions.top || e.clientY > dialogDimensions.bottom) {
                  googleMissingInfoModal.close();
                }
            });

但是，当用户使用键盘按下向上/向下箭头键关闭模式时，它会扰乱模式的可访问性。我的模式有单选按钮，因此用户需要能够使用箭头键来导航表单。

我也尝试过这里的建议，单击其外部时关闭模式，但是当我尝试这些时，单击其外部时模式不会关闭。

这是我的模态：

                        <dialog id="address-verification-modal" class="google-validation-modal">
                            <span class="verification-modal-close">&times;</span>
                            <form method="dialog" class="modal-form">
                                <h1 class="verification-issues-heading">We couldn't verify your address</h1>
                                <p class="verification-issues-paragraph">Review the verification issues</p>
                                <h2 class="verification-issues-sub-heading">What you entered:</h2>
                                <div id="patient-address-content" class="patient-address-container">
                                    <div id="verify-street"></div>
                                    <div id="verify-city-state-zip"></div>
                                </div>
                                <h2 class="verification-issues-sub-heading">Verification Issues</h2>
                                <div id="address-verification-issues">
                                </div>
                                <div class="verification-button-container">
                                    <button type="button" id="use-entered-button" class="use-entered-button">Use entered</button>
                                    <button type="button" id="make-changes-button" class="make-changes-button">Make changes</button>
                                </div>
                            </form>
                        </dialog>

Answer 1

要解决箭头键问题，您可以添加一个子句以确保它是鼠标事件。

const googleMissingInfoModal = document.getElementById('address-verification-modal');

googleMissingInfoModal.addEventListener('click', (e) => {
    // Check if the event is a mouse event
    if (e instanceof MouseEvent) {
        const dialogDimensions = googleMissingInfoModal.getBoundingClientRect();
        if (e.clientX < dialogDimensions.left || e.clientX > dialogDimensions.right || 
            e.clientY < dialogDimensions.top || e.clientY > dialogDimensions.bottom) {
            googleMissingInfoModal.close();
        }
    }
});