Polymer 聚合物1.x和外部元件咔嗒声

所以，我正在使用Polymer 1.6设计一个简单的“log”元素，它会在我使用的任何元素下面显示一条log消息

它工作得相当好，但是，如果用户单击页面上的任何地方，我想让日志消息“消失”

这让我想到聚合物1.x的“外部点击”

SE封面上的大多数示例都使用聚合物模块中的现有事件，但我找不到任何与我所寻找的内容密切相关的内容

这个例子看起来很有希望，但是，

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>

：主持人{
显示器：flex；
}
（功能（）{
"严格使用",；
聚合物({
是‘我的日志’，
扩展：“p”，
特性：{
日志：{
类型：字符串，
观察员：“_observeLogs”
},
日志类型：{
类型：字符串
},
日志可见性：{
类型：布尔型，
值：false
}
},
_观测：功能（val）{
console.log（'日志更改为'，val）
如果（val&&val！=''）
此.$.log.innerHTML=val；
},
_getLogClass:函数（日志，日志类型）{
返回日志类型！==undefined&&logType！==false？'visible'+日志类型：“”；
}
});
})();

没有外部单击事件。 您可以检查

事件.target

是否位于特定元素的内部或外部。您可以在父对象上进行迭代，然后检查是否先到达

此

（内部）或

文档

（外部）

你也可以用like

---

我还没有用Polymer自己测试过

contains（）

。

它确实有效：D我只是在连接到窗口对象的单击事件中添加了它，谢谢！

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