Элемент диалога Dismiss html, щелкнув по фону

Question

Используя библиотеку материалов Lite для создания dialogs, в которой по существу используется базовый элемент <dialog>, есть ли способ отклонить диалог, щелкнув по его фону? (При щелчке по самому диалоговому окну должно быть отклонено не).

<dialog>Hi</dialog>  
<button>show</button> 

document.querySelector("button").addEventListener("click", 
() => document.querySelector("dialog").showModal()); 

https://jsfiddle.net/fyjbvbqq/

Щелчок в любом месте на экране, когда отображается диалоговое окно соответствует щелчку dialog элемент так, что кажется, что не существует простой способ определить, если фон нажал ... есть способ сделать это?

Answer 1

Вы можете использовать Element.getBoundingClientRect, чтобы получить размер и положение диалога и испытания, если текущие координаты клиента находятся внутри этой области:

document.querySelector("button").addEventListener("click",() => document.querySelector("dialog").showModal()); 
 
document.querySelector("dialog").addEventListener("click", (e) => { 
 
    var rect = e.target.getBoundingClientRect(); 
 
    var minX = rect.left + e.target.clientLeft; 
 
    var minY = rect.top + e.target.clientTop; 
 
    if ((e.clientX < minX || e.clientX >= minX + e.target.clientWidth) || 
 
     (e.clientY < minY || e.clientY >= minY + e.target.clientHeight)) { 
 
    e.target.close(); 
 
    } 
 
});

<dialog>Hi</dialog> 
 

 
<button> 
 
    show 
 
</button>