Polymer 1.xとouter-element-click

Question

Polymer 1.6を使って簡単な「log」要素を設計しています。

これはかなりうまく動作しますが、ユーザーがページ上の任意の場所をクリックすると、ログメッセージが「消える」ようにしたいと思います。

ポリマーの1.xで「外側クリック」に対するポリマーモジュール内の既存のイベントを使用してSEのカバーで見つかった

ほとんどの例を私にもたらしますが、私は密接に私が探しています何が何かを見つけることができませんでしたために。

この例では、Polymer.dom(target).node.domHostが

だから、誰もが外側クリックイベントをキャッチする方法上の任意の洞察力を持っている...私のテストで定義されていない、Polymer: Detect click outside of custom element有望に見えたが？レコードの

は、ここには外側のクリック・イベントはありません私のログ要素

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

よう

使用することもできます。