js弹窗冒泡阻止

在JavaScript中，弹窗（如alert、confirm、prompt）本身不会触发冒泡事件，因为它们是浏览器原生的模态对话框，不属于DOM事件体系。但是，如果你指的是自定义的弹窗（如使用div元素模拟的弹窗），那么这些弹窗上的点击事件可能会涉及到事件冒泡。

事件冒泡基础概念

事件冒泡是指当一个元素上的事件被触发时，该事件会从最内层的元素开始，逐级向上传播到最外层的元素，直到传播到document对象。

阻止事件冒泡

如果你想阻止事件冒泡，可以使用event.stopPropagation()方法。这个方法会阻止事件继续向上层元素传播。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阻止事件冒泡示例</title>
    <style>
        .modal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
<body>
    <button id="openModalBtn">打开弹窗</button>
    <div id="myModal" class="modal">
        <p>这是一个自定义弹窗</p>
        <button id="closeModalBtn">关闭</button>
    </div>

    <script>
        document.getElementById('openModalBtn').addEventListener('click', function(event) {
            document.getElementById('myModal').style.display = 'block';
        });

        document.getElementById('closeModalBtn').addEventListener('click', function(event) {
            event.stopPropagation(); // 阻止事件冒泡
            document.getElementById('myModal').style.display = 'none';
        });

        // 点击弹窗外部区域关闭弹窗
        document.addEventListener('click', function(event) {
            if (event.target === document.getElementById('myModal')) {
                document.getElementById('myModal').style.display = 'none';
            }
        });
    </script>
</body>
</html>

解释

打开弹窗：点击“打开弹窗”按钮时，显示自定义弹窗。
关闭弹窗：点击“关闭”按钮时，使用event.stopPropagation()阻止事件冒泡，这样点击“关闭”按钮不会触发外部的点击事件（即不会关闭弹窗）。
点击弹窗外部区域关闭弹窗：在document上添加点击事件监听器，如果点击事件的目标是弹窗本身（而不是弹窗内部的元素），则关闭弹窗。