在没有jQuery的情况下在外部单击时模糊div

在没有jQuery的情况下，在外部单击时模糊div可以通过原生JavaScript来实现。以下是一个实现该功能的示例代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        #myDiv {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 999;
            opacity: 0.5;
            filter: blur(5px);
            display: none;
        }
    </style>
</head>
<body>
    <button onclick="toggleDiv()">显示/隐藏</button>
    <div id="myDiv"></div>

    <script>
        var myDiv = document.getElementById("myDiv");

        function toggleDiv() {
            if (myDiv.style.display === "none") {
                myDiv.style.display = "block";
                document.addEventListener("click", outsideClick);
            } else {
                myDiv.style.display = "none";
                document.removeEventListener("click", outsideClick);
            }
        }

        function outsideClick(event) {
            if (!myDiv.contains(event.target)) {
                myDiv.style.display = "none";
                document.removeEventListener("click", outsideClick);
            }
        }
    </script>
</body>
</html>

这段代码创建了一个按钮和一个带有模糊效果的div。点击按钮时，div会显示或隐藏。当div显示时，点击div外部的任何地方都会使div隐藏起来。

这个功能的实现原理是通过给document对象添加click事件监听器，在点击事件发生时判断点击的目标元素是否在div内部。如果不在div内部，则隐藏div。通过添加和移除事件监听器，可以控制点击事件的触发和取消。

这个功能可以应用于各种场景，例如点击弹出层外部关闭弹出层、点击菜单外部关闭菜单等。

腾讯云相关产品和产品介绍链接地址：