Полимер - не может щелкнуть событие за пределами элемента, чтобы закрыть себя - PullRequest
Новая
       15

Полимер - не может щелкнуть событие за пределами элемента, чтобы закрыть себя

1 голос
/ 29 марта 2019

Полимер 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>

Ответы [ 2 ]

1 голос
/ 31 марта 2019

Я не уверен, будет ли этого достаточно, но если вы оберните элемент 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.Надеюсь, это поможет.

  • В случае необходимости больше.Мы можем разработать это.

Демо

РЕДАКТИРОВАТЬ

Оберните ваш элемент в бумажный диалог.И в ready:function() позвоните

this.$.dialog.open()

Тогда, когда вы click вне элемента.paper-dialog закроется автоматически.

0 голосов
/ 09 мая 2019

Только к вашему сведению, вы не смогли заставить это работать, потому что пользовательские элементы не прослушивают события за пределами их собственной инкапсуляции, если вы явно не подключили их для этого ... и если вы это сделаете, вы можетеНе используйте встроенную обработку событий 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);

Или, по крайней мере, я так думаю.Полимерные элементы либо делали это, связываясь с другим событием (размытие?), Либо заставляя родительский элемент вызывать событие по щелчку, который велел дочернему элементу закрыться.

...