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' 它显示为 <div id="main"> 无论我是否单击任何元素，包括模态下的下拉元素。如何在使用 'click' 事件侦听器单击的 shadowRoot 下获得正确元素的地方添加事件侦听器？

Answer 1

使用addEventListener

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

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

Shadowroot : Not getting the correct target for event listener

html

javascript

jquery

shadow-dom