聚合物 - 无法单击元素外部的事件来关闭自身

Question

聚合物 1.*

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

知道我做错了什么吗？

编辑：我正在研究 paper-menu-button，当我在元素外部单击时它会关闭 paper-listbox....但我看不到它捕获该事件的任何地方 https://github.com/PolymerElements/paper-menu-button/blob/master/paper-menu-button.js#L311

<dom-module id="sp-referrals-reservations-dropdown">
  <template>
    <style include="grid-dropdown-styles">


    </style>

    <div id="dropdown" class="grid-dropdown">
        <paper-listbox>

          <div class="grid-dropdown-item">Convert to stay</div>
          <div class="grid-dropdown-item">Cancel reservation</div>
          <div class="grid-dropdown-item">Delete reservation</div>

        </paper-listbox>
    </div>


  </template>

  <script>
    (function() {
      'use strict';
      Polymer({
        is: 'sp-referrals-reservations-dropdown',

        behaviors: [Polymer.IronControlState],

        properties: {
        },

        listeners: {
          'tap': '_close',
          'click': '_close',
          'blur': '_close',
          'focusout': '_close',
          'focusChanged': '_close',
          'focus-changed': '_close',
          'active-changed': '_close',
          'activeChanged': '_close',
          'iron-activate': '_close',
          'ironActivate': '_close',
        },

        open: function(e) {

        },

        _close: function() {
          console.log('aaa');
          this.$.dropdown.style.display = "none";
        },

      });
    })();
  </script>
</dom-module>

Answer 1

我不确定，它是否足够，但是如果你用 parent-element 包裹 sp-referrals-reservations-dropdown 元素，那么你可以像它的 [=45] 一样收听 parent-element 事件=].

 <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>

在 parent 的脚本中：

Polymer({is:'parent-element', properties:{}, 
           listeners:{ 'tap': '_taped'},

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

这个_taped函数将调用child的_close函数。希望它的帮助。

以防万一。我们可以开发这个。

Demo

编辑

将您的元素包装到 paper-dialog 中。在 ready:function() 调用

this.$.dialog.open()

然后当你 click 在元素之外。 paper-dialog 会自动关闭。

Answer 2

仅供参考，您无法使其正常工作，因为自定义元素不会侦听其自身封装之外的事件，除非您明确将它们连接起来这样做......如果您这样做，您不能使用 Polymer 的 built-in 事件处理。

所以这样的事情会起作用：

// 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 - can not click event outside of element to close itself

polymer

polymer-1.0