Polymer 聚合物-不能单击元素外部的事件以关闭自身

聚合物1*

我必须写我自己的下拉菜单。当用户在元素外部单击时，我需要关闭菜单。但是，当用户在元素外部单击时，我无法捕获事件，因此我可以关闭菜单

你知道我做错了什么吗

编辑：我正在学习纸张菜单按钮，当我在元素外部单击时，该按钮将关闭纸张列表框。。。。但我看不到它在哪里捕捉到那个事件

改留
取消预订
删除预订
（功能（）{
"严格使用",；
聚合物({
is:“sp转介预订下拉列表”，
行为：[聚合物.IronControlState]，
特性：{
},
听众：{
“点击”：“关闭”，
'单击'：'关闭'，
“模糊”：“关闭”，
'聚焦输出'：'关闭'，
'焦点更改'：'关闭'，
“焦点已更改”：“关闭”，
“活动已更改”：“关闭”，
“activeChanged”：“关闭”，
“铁激活”：“关闭”，
“ironActivate”：“关闭”，
},
开放：功能（e）{
},
_关闭：函数（）{
console.log（'aaa'）；
此.$.dropdown.style.display=“无”；
},
});
})();

我不确定，这是否足够，但是如果您将

sp referrals reservations下拉列表

元素与

父元素

包装在一起，那么您可以监听与其子元素相同的父元素事件

 <parent-element></parent-element>

  <dom-module id="parent-element">
    <template>
      <style>
        :host {
          display:block;
          background:green;
          width:100%;
          height:100vh; }
      </style>

      <sp-referrals-reservations-dropdown id="spref"></sp-referrals-reservations-dropdown>

此录制的

\u函数将调用child的
\u close
函数。希望它能有所帮助


万一需要更多。我们可以开发这个


编辑

将元素包装到“纸张”对话框中。并在
ready:function（）调用

this.$.dialog.open（）

然后，当您
单击元素外部的
<代码>纸面对话框将自动关闭。
仅供参考，您无法使其工作，因为自定义元素不会侦听其自身封装之外的事件，除非您显式地将它们连接起来以执行此操作。。。如果这样做，就不能使用Polymer的内置事件处理

因此，类似这样的方法会起作用：

// Insert this somewhere it'll get run once attached to the DOM
// This line keeps clicks within your element from closing the dropdown
this.shadowroot.addEventListener('click', (event) => { event.stopPropagation(); });
// And this listens for any click events that made it up to body, and closes the element
document.querySelector('body').addEventListener('click', this._close);

或者，至少，这是我认为正在发生的事情。聚合元素通过绑定到不同的事件（模糊？）或让父元素在单击时触发一个事件，通知子元素关闭来完成此操作。
您能否共享更多代码、您自己的下拉代码以及如何单击外部元素？等。它的工作原理就像纸张菜单按钮或纸张下拉菜单。同样的逻辑。然而，由于特殊的环境，我不得不构建自己的元素。问题是，当我在该元素外单击时，我无法捕捉到一个
单击
事件来关闭它，就像纸质菜单按钮或纸质下拉菜单一样。很抱歉再次询问您，我试图了解您是如何单击该元素外的。这里我演示了代码。如果你想添加一些东西，你可以用叉子叉。谢谢你花时间做这件事。我在这里创造了一个叉子。因此，如果您在粉色空间之外单击，我需要元素捕获单击/模糊事件
谢谢，我将在本周一尝试。但是从元素本身捕获该事件是正确的。你知道Polymer是如何使用“纸张菜单按钮”实现这一点的吗？当你在纸张列表框外单击时，该按钮会消失？@dman，我有另一个想法，将你的元素包装到
纸张对话框中。在
ready:function（）
调用
this.$.dialog.open（）
…查看
演示
链接而不是上面的链接，我通过在打开它的按钮上设置焦点，然后从外部关闭它来让它工作。但既然你的答案也行，我就把它标上了。谢谢你的帮助！
Polymer({is:'parent-element', properties:{}, 
           listeners:{ 'tap': '_taped'},

           _taped:function(t){
             this.$.spref._close();
           }
          });

// Insert this somewhere it'll get run once attached to the DOM
// This line keeps clicks within your element from closing the dropdown
this.shadowroot.addEventListener('click', (event) => { event.stopPropagation(); });
// And this listens for any click events that made it up to body, and closes the element
document.querySelector('body').addEventListener('click', this._close);