html5 – 如何通过点击它的::背景来关闭新的html标签

前端之家收集整理的这篇文章主要介绍了html5 – 如何通过点击它的::背景来关闭新的html标签前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我没有找到任何内置解决方案或解决方法,通过点击其背景(::背景)来关闭 html5元素,尽管它显然是一个基本功能.

解决方法

可以使用对话框边界检测背景点击.
var dialog = document.getElementByTagName('dialog');
dialog.showModal();
dialog.addEventListener('click',function (event) {
    var rect = dialog.getBoundingClientRect();
    var isInDialog=(rect.top <= event.clientY && event.clientY <= rect.top + rect.height
      && rect.left <= event.clientX && event.clientX <= rect.left + rect.width);
    if (!isInDialog) {
        dialog.close();
    }
});
原文链接:https://www.f2er.com/html5/168241.html

猜你在找的HTML5相关文章