Shadowroot：没有获得事件监听器的正确目标

Question

我有一个带有模态的网页，在 Shadowroot 下有一个自定义下拉菜单，如下所示：

<div id="main">
#shadow-root
<div class="modal fade in" id="sample-modal">
    <div class="modal-dialog modal-xl" role="dialog" aria-hidden="true">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" style="font-size:0.85rem" id="download-modal-label">Modal Title</h6>
            </div>
            <form onsubmit="return false;">
                <div class="modal-body" id="modal-body" style="overflow: inherit !important">
                    <div class="dropdown">
                        <button onclick="myFunction()" class="dropbtn">Dropdown</button>
                        <div id="myDropdown" class="dropdown-content">
                        <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
                        <a href="#about">About</a>
                        <a href="#base">Base</a>
                        <a href="#blog">Blog</a>
                    </div>
                   </div>
                </div>
            </form>
        </div>
    </div>
</div>

为此，我想添加一个事件侦听器，如果我单击下拉菜单之外的任何位置，我会隐藏下拉 div。为此，我添加了事件侦听器，如下所示：

let root = document.getElementById("main").shadowRoot;
$(root).on("click", function(e) {
            var clickedOn=$(e.target);
        });

但这似乎根本不起作用。我尝试将单击事件侦听器附加到文档，以检查事件目标，如下所示：

$(document).on("click", function(e) {
            var clickedOn=$(e.target);
        });

此事件侦听器被触发，但目标元素“e”显示为

< /code> 无论我是否单击任何元素，包括模式下的下拉元素。如何添加事件侦听器，以便在使用“click”事件侦听器单击的 ShadowRoot 下获取正确的元素？

Answer 1

使用addEventListener

root.addEventListener("click", function(e) {
    var clickedOn=$(e.target);
});