Question

聚合物1。*

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

有什么主意我做错了吗？

编辑：我正在研究纸张菜单按钮，当我在元素外部单击时，该按钮会关闭纸张列表框。...但是我看不到任何地方捕获到该事件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

我不确定是否足够，但是如果用sp-referrals-reservations-dropdown包装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>

在父母的剧本下：

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

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

此_taped函数将调用子级_close函数。希望它的帮助。

如果需要更多。我们可以开发这个。

Demo

编辑

将元素包装到纸张对话框中。然后在ready:function()致电

this.$.dialog.open()

然后click在元素外部。 paper-dialog将自动关闭。

Answer 2

仅供参考，您无法使它正常工作，因为自定义元素不会监听其自身封装之外的事件，除非您明确地将其连接起来……如果这样做，您可以不要使用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);

或者至少，这就是我所想的。聚合物元素要么通过绑定到另一个事件（模糊？）来完成操作，要么通过使父元素在单击时触发一个事件来告知子元素关闭。

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

2 个答案: