聚合物1.x和外部元素點擊

Question

所以，我正在設計一個簡單的「日誌」元素使用聚合物1.6，顯示日誌消息下面的任何元素，我用它。

它工作得很好，但是，如果用戶單擊頁面上的任何位置，我想使日誌消息「消失」。

這讓我想起「外，點擊」與聚合物的1.x

上使用聚合物模塊的現有事件SE蓋發現

大多數的例子，但我無法找到任何東西，仔細做什麼我要找對於。

這個例子看起來前途無量Polymer: Detect click outside of custom element但是，Polymer.dom(target).node.domHost未定義在我的測試...

因此，任何人有如何捕捉到外擊事件的任何見解？

爲了記錄在案，這裏是我的日誌元素

<link rel="import" href="../../bower_components/polymer/polymer.html"> 
<dom-module id="my-log"> 
    <template> 
    <style> 
    :host { 
     display: flex; 
    } 
    </style> 
    <span class="arrow"></span> 
    <span id="log" class="message"><content></content></span> 
    </template> 

    <script> 
    (function() { 
     'use strict'; 
     Polymer({ 
     is: 'my-log', 
     extends: 'p', 
     properties: { 
      log: { 
      type: String, 
      observer: '_observeLogs' 
      }, 
      logType: { 
      type: String 
      }, 
      logVisibility: { 
      type: Boolean, 
      value: false 
      } 
     }, 
     _observeLogs: function(val) { 
      console.log('log changed to', val) 
      if (val && val !== '') 
      this.$.log.innerHTML = val; 
     }, 
     _getLogClass: function(log, logType) { 
      return logType !== undefined && logType !== false ? 'visible '+logType : ''; 
     } 

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

Answer 1

沒有外擊事件。 您可以檢查event.target是否位於特定元素的內部或外部。您可以迭代父母並檢查您是否首先到達this（內部）或document（外部）。

您還可以使用node.contains像

onClick(event) { 
    var isOuter = !(event.target === this || this.contains(event.target) || this.root.contains(event.target)); 
    console.log('isOuter', isOuter); 
} 

我還沒有與聚合物測試自己呢。