javascript - 确定用户是否在 shadow dom 外部单击

Question

我正在尝试实现一个下拉菜单，您可以在外部单击以关闭该下拉菜单。下拉列表是自定义日期输入的一部分，并封装在输入的影子 DOM 中。

我想写这样的东西:

window.addEventListener('mousedown', function (evt) {
  if (!componentNode.contains(evt.target)) {
    closeDropdown();
  }
});

但是，该事件是重定向的，因此 evt.target 始终在元素外部。事件在到达窗口之前会跨越多个阴影边界，因此似乎无法真正知道用户是否在我的组件内单击。

注意:我没有在任何地方使用聚合物——我需要一个适用于通用影子 DOM 的答案，而不是聚合物特定的 hack。

Answer 1

您可以尝试使用 event 对象的 path 属性。 还没有找到它的实际引用 并且 MDN 还没有它的页面。 HTML5Rocks虽然在 shadow dom 教程中有一小部分关于它。因此，我不知道跨浏览器的兼容性。

找到 W3 Spec关于事件路径，不确定这是否完全适用于 Event.path 属性，但这是我能找到的最接近的引用。

_{如果有人知道对 Event.path 的实际规范引用(如果链接的规范页面还没有)，请随意编辑它。}

它包含事件经过的路径。它将包含影子 dom 中的元素。列表中的第一个元素 ( path[0] ) 应该是实际点击的元素。请注意，您需要从 shadow dom 引用调用 contains，例如 shadowRoot.contains(e.path[0]) 或您的 shadow dom 中的某些子元素。

演示:点击菜单展开，点击菜单项以外的任意位置将关闭菜单。

var host = document.querySelector('#host');
var root = host.createShadowRoot();
d = document.createElement("div");
d.id = "shadowdiv";

d.innerHTML = `
  <div id="menu">
    <div class="menu-item menu-toggle">Menu</div>
    <div class="menu-item">Item 1</div>
    <div class="menu-item">Item 2</div>
    <div class="menu-item">Item 3</div>
  </div>
  <div id="other">Other shadow element</div>
`;
var menuToggle = d.querySelector(".menu-toggle");
var menu = d.querySelector("#menu");
menuToggle.addEventListener("click",function(e){
  menu.classList.toggle("active");
});
root.appendChild(d)

//Use document instead of window
document.addEventListener("click",function(e){
  if(!menu.contains(e.path[0])){
    menu.classList.remove("active");
  }
});

#host::shadow #menu{
  height:24px;
  width:150px;
  transition:height 1s;
  overflow:hidden;
  background:black;
  color:white;
}
#host::shadow #menu.active {
  height:300px;
}
#host::shadow #menu .menu-item {
  height:24px;
  text-align:center;
  line-height:24px;
}

#host::shadow #other {
  position:absolute;
  right:100px;
  top:0px;
  background:yellow;
  width:100px;
  height:32px;
  font-size:12px;
  padding:4px;
}

<div id="host"></div>