我有一個帶有模式的網頁，在 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);
});
<div id="main">此事件偵聽器被觸發，但無論我是否單擊任何元素，包括模式下的下拉元素，它都顯示為目標元素“e” 。如何添加事件偵聽器，以便在使用“click”事件偵聽器單擊的 shadowRoot 下獲得正確的元素？
uj5u.com熱心網友回復：
采用addEventListener
root.addEventListener("click", function(e) {
var clickedOn=$(e.target);
});
uj5u.com熱心網友回復：
在您的第一個事件偵聽器中，您實際上是在選擇 shadowroot 而不是主 div。更正并停止事件傳播
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/439976.html
標籤：javascript html jQuery 影子王国
上一篇：提交按鈕沒有做任何事情