Javascript event.stopPropagation覆盖event.target

我试图编写一个Javascript代码，当用户在modals之外单击时关闭modals。 代码如下：

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modalo) {
        modalo.style.display = "none";
    } else if (event.target == modal) {
        modal.style.display = "none";
    } else if (event.target == yesnomodal) {
        yesnomodal.style.display = "none";
    } else if (event.target == errmodal) {
        errmodal.style.display = "none";
    }
}

此代码一直有效，直到添加了另一个用于在用户单击某些按钮时显示某些弹出窗口的代码。代码是：

var x = document.getElementById("bell_svg_dropdown_menu");
var y = document.getElementById("home_svg_dropdown_menu");

function bellSvgDropdown(t) {
    if (t && x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
        y.className = y.className.replace(" w3-show", "");
    } else {
        x.className = x.className.replace(" w3-show", "");
    }
    event.stopPropagation();
}

function homeSvgDropdown(t) {
    if (t && y.className.indexOf("w3-show") == -1) {
        y.className += " w3-show";
        x.className = x.className.replace(" w3-show", "");
    } else {
        y.className = y.className.replace(" w3-show", "");
    }
    event.stopPropagation();
}

现在，将显示弹出窗口，但无法通过在模态外部单击来关闭模态。我的观察结果是

event.stopPropagation

覆盖

event.target

。我应该如何重写代码来解决这个问题

弹出窗口的HTML为：

<div class="inline_block">
                <div style="display:inline-block; margin:6.5px; position:relative;" class="">
                    <div class="w3-dropdown-click">
                        <svg onclick="homeSvgDropdown(true)" fill="#20b2aa" height="40" viewBox="0 0 24 24" width="40" xmlns="http://www.w3.org/2000/svg">
                            <foreignObject x="0" y="0" width="10" height="10">
                                <div id="" class="in_svg_notification">5</div>
                            </foreignObject>
                            <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
                            <path d="M0 0h24v24H0z" fill="none"/>
                        </svg>
                        <div id="home_svg_dropdown_menu" class="w3-dropdown-content w3-bar-block w3-border" style="width: 350px;">
                            <a href="#" class="w3-bar-item w3-button">Customer 1 wants to rent</a>
                            <a href="#" class="w3-bar-item w3-button">Customer 2 wants to rent</a>
                            <a href="#" class="w3-bar-item w3-button">Customer 3 wants to rent</a>
                        </div>
                    </div>
                </div>
                <div style="display:inline-block; margin:6.5px; position:relative;" class="">
                    <div class="w3-dropdown-click">
                        <svg onclick="bellSvgDropdown(true)" fill="#20b2aa" height="40" viewBox="0 0 24 24" width="40" xmlns="http://www.w3.org/2000/svg">
                            <foreignObject x="0" y="0" width="10" height="10">
                                <div id="" class="in_svg_notification">5</div>
                            </foreignObject>
                            <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>
                        </svg>
                        <div id="bell_svg_dropdown_menu" class="w3-dropdown-content w3-bar-block w3-border" style="width: 350px;">
                            <a href="#" class="w3-bar-item w3-button">Customer 1 wants to rent</a>
                            <a href="#" class="w3-bar-item w3-button">Customer 2 wants to rent</a>
                            <a href="#" class="w3-bar-item w3-button">Customer 3 wants to rent</a>
                        </div>
                    </div>
                </div>
            </div>

5.
5.

其中一个模态的HTML是：

<!-- The Modal -->
                    <div id="myModalSignUp" class="modal">

                        <!-- Modal content -->
                        <div class="modal-content">
                            <span class="close1">&times;</span>
                            <div style="font-size:30px; font-weight:bold; color:#008B8B;">Register as owner..</div>

                            <div style="margin:auto; margin-bottom:20px;">
                                <form class="" action="" method="post" autocomplete="on">
                                    <div><input class="modalin" type="text" placeholder="First name"></div>
                                    <div><input class="modalin" type="text" placeholder="Middle name"></div>
                                    <div><input class="modalin" type="text" placeholder="Last name"></div>
                                    <div><input class="modalin" type="tel" placeholder="Phone" pattern="([0]{1}[6|7]{1}[1-9]{1}[0-9]{7})?"></div>
                                    <div style="line-height:22px; padding:8px 5%; font-size:12.5px;">By clicking Join now, you agree to the <b>Brentles</b> User Agreement, Privacy Policy, and Cookie Policy.</div>
                                    <div style="line-height:0px;"><input class="modal_sign_btn" type="submit" value="Enter"></div>
                                </form>
                            </div>
                        </div>

                    </div>

&时代；
注册为所有者。。
单击“立即加入”即表示您同意Brentles用户协议、隐私策略和Cookie策略。

modals javascript前面有以下代码：

    // Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

//获取模式
var modal=document.getElementById（'myModal'）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“myBtn”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}

你也能提供HTML吗？有一篇关于stopPropagation（）[Link]（）效果的好文章。@Deepakgupta Yes@Deepakgupta-编辑成功。。HTML代码添加了“我的观察结果是event.stopPropagation会覆盖event.target”——我怀疑实际情况是否如此。听起来您处理的事件与您认为的不同（这可能是由于其他原因阻止了某个事件的传播）