Полимер: обнаружение щелчка вне пользовательского элемента

Question

У меня есть пользовательский элемент и вы хотите обнаружить клики за его пределами. Например,

<dom-module id="simple-element"> 



<style> 
    </style> 

    <template> 
    <content></content> 
    </template> 

</dom-module> 

<script> 
    (function() { 
    Polymer({ 
     is: 'simple-element', 
     listeners: { 
     'tap': 'regularTap' 
     }, 
     regularTap: function() { 
     console.log("i was tapped"); 
     } 
    }); 
    })(); 
</script> 

Есть ли событие, в котором я могу слушать, что скажет мне, когда пользователь нажал вне элемента? Благодарю.

Answer 1

Что-то вдоль этих линий должны делать то, что вы хотите:

window.addEventListener((e) { 
    var target = event.target; 

    while(target != this && target != document.body) { 
    target = Polymer.dom(target).node.domHost.parentNode; 
    // might need some additional steps to get the parent from inside custom elements 
    // don't know by heart 
    } 
    if(target == this) { 
    // inside element 
    } else { 
    // outside element 
    } 
}); 

Answer 2

Модифицированный код так, что он на самом деле работает:

var that = this; 

window.addEventListener("click", function(e){ 
    var target = e.target; 

    while (target != that && target != document.body) { 
     target = Polymer.dom(target).node.parentElement; 
    } 

    if (target == that) { 
     console.log("inside element"); 
    } else { 
     console.log("outside element"); 
    } 
}); 

Answer 3

Вы можете использовать поведение, как это:

<script> 
     /** @polymerBehavior Polymer.HarleyClickOutsideBehavior */ 
     Polymer.HarleyClickOutsideBehavior = { 

     ready: function() { 
      // bind listener method 
      this.clickOutsideListenerBinded = this._clickOutsideListener.bind(this) 
     }, 

     detached: function() { 
      this._clickOutsideUnlisten() 
     }, 

     clickOutsideListen: function() { 
      // run this method to start listening 
      this._clickOutsideUnlisten() 
      window.addEventListener('click', this.clickOutsideListenerBinded, false) 
     }, 

     _clickOutsideUnlisten: function() { 
      window.removeEventListener('click', this.clickOutsideListenerBinded, false) 
     }, 

     _clickOutsideListener: function (ev) { 
      // check if the user has clicked on my component or on my children 
      var isOutside = !ev.path.find(function (path) { 
      return path === this 
      }.bind(this)) 
      if (isOutside) { 
      this.onClickOutside() 
      this._clickOutsideUnlisten() 
      } 
     }, 

     onClickOutside: function() { 
      // overwrite this method to be notified 
     } 

     } 
    </script> 

Answer 4

Я нашел более простое решение, которое еще не проверено на всех браузерах, но имеет смысл. Поэтому я добавляю глобальный слушатель в окно и слушатель к пользовательскому элементу. Таким образом, нажмите внутри позвонит и нажмите снаружи будет вызывать только глобальный ..

listenToClickOutside() { 
      this.addEventListener("click", thisClick, false); 
      window.addEventListener("click", windowClick, false); 

      var clicksInside = 0; 
      var thisRef = this; 

      function thisClick() { 
       clicksInside++ 
      } 

      function windowClick(event) { 
       clicksInside--; 
       if (clicksInside < 0) { 
        thisRef.removeEventListener("click", thisClick, false); 
        window.removeEventListener("click", windowClick, false); 
        // CLICKED outside 
       } 
      } 
     }