Question

所以，我正在设计一个简单的＆＃34; log＆＃34;使用Polymer 1.6的元素，在我使用它的任何元素下显示一条日志消息。

它运作得相当好，但是，我想让日志消息＆＃34;消失＆＃34;如果用户点击页面上的任何位置。

这让我进入＆＃34;外部点击＆＃34;与Polymer 1.x

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

此示例看起来很有前途Polymer: Detect click outside of custom element，但Polymer.dom(target).node.domHost在我的测试中未定义...

那么，任何人都有关于如何捕获外部点击事件的任何见解？

对于记录，这是my-log元素

<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);
}

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

Polymer 1.x和外部元素单击

1 个答案: