聚合物 1.x 和外部元素单击

Question

因此，我正在使用 Polymer 1.6 设计一个简单的 "log" 元素，它会在我使用它的任何元素下方显示一条日志消息。

它工作得很好，但是，如果用户点击页面上的任何地方，我想生成日志消息 "disappear"。

这让我想到 "outer-clicking" 和 Polymer 1.x

在 SE 上找到的大多数示例都使用了 Polymer 模块中的现有事件，但我找不到任何与我正在寻找的密切相关的内容。

这个例子看起来很有希望但是，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

没有 outer-click 事件。您可以检查 event.target 是在特定元素的内部还是外部。您可以遍历 parents 并检查是否先到达 this（内部）或 document（外部）。

您也可以使用node.contains喜欢

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

我自己还没有用 Polymer 测试 contains()。

聚合物 1.x 和外部元素单击

Polymer 1.x and outer-element-click

polymer

polymer-1.0