Question

我想创建一个自定义的Polymer元素，其行为类似于按钮并具有一些HTML布局。说：

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-behaviors/iron-button-state.html">
<link rel="import" href="../../bower_components/iron-behaviors/iron-control-state.html">

<dom-module id="trivial-button">

    <template>
        <style>
        :host {
            display: inline-block;
            position: relative;
            background-color: #FFFFFF;
            width: 100%;
        }
        </style>

        <content style="color: #000000;">
        </content>
        <p style="color: #000000;">some brabbling</p>
    </template>

</dom-module>

<script>

    Polymer({
        is: 'trivial-button',

        that: this,

        behaviors: [
            Polymer.IronButtonState,
            Polymer.IronControlState
        ],
    });

</script>

我想在我的页面中多次使用此组件，如下所示：

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel='import' href='trivial-button.html'>

<dom-module id="page-browse">

    <template>
        <style include="triggi-colors">
            :host {
                display: block;
                box-sizing: border-box;
                padding: 10px;
            }
        </style>

        <trivial-button id='myFirstBytton' on-tap="handleTapped">1stButtonText</trivial-button>
        <trivial-button id='mySecondBytton' on-tap="handleTapped">2ndButtonText</trivial-button>

    </template>

    <script>

        Polymer({
            is: 'page-browse',

            handleTapped: function(e) {
                console.log('Hit the button!');
                console.log(e.target.id);
            }
        });

    </script>

</dom-module>

现在，当单击其中一个实例时，我想访问作为按钮的顶级聚合物对象的属性，以便我可以例如执行buttonReference.id。似乎event.target是要走的路，但是在我的尝试中，event.target结果指向被点击的确切HTML元素，而不是HTML元素所属的聚合物元素。有没有办法在处理程序中检索聚合物元素本身？

Answer 1

我怀疑你目前正在使用shady DOM。但是，您期望shadow DOM的事件重定向行为（您希望事件侦听器看到您的按钮元素，而不是按钮元素中的HTML）。

解决此问题的最简单方法是使用Polymer的API规范事件定位。

换句话说，将Polymer.dom(e).localTarget替换为svg = d3.select("body").append("svg") .attr("width", 300) .attr("height", 300); console.log("window width" + window.innerWidth/2); line = svg.append("line") .attr("x1",300) .attr("y1", 0) .attr('x2', 0) .attr("y2", 300) .attr("stroke-width", 5) .attr("fill", "black");将为您提供自定义元素，而不是自定义元素中的HTML。

在此处详细了解shadow DOM与shady DOM事件定位： ObjectAnimator.ofFloat Android Docs

Answer 2

您可以在子元素上侦听事件，然后通过触发＆＃39; handeTapped＆＃39;将其传递给父元素。事件

<强>测试按钮点击-target.html上

<p on-tap="notifyParent" style="color: #000000;">some brabbling</p>

听众：

notifyParent: function(e) {
   e.detail.id = this.id;
   e.detail.isChild = true;
   this.fire('handleTapped', e.detail );
}

页-browse.html

handleTapped: function(e) { console.log('Hit the button!'); if (e.detail.isChild) console.log(e.detail.id); else console.log(e.target.id); }

在您的page-browse元素中，您可以检查事件是直接触发还是由子触发。

注意：这看起来有点hacky，我只在chrome上测试过它。

Answer 3

如果你在Polymer元素中有嵌套元素，你可以遍历DOM来找到你的元素：

item = e.srcElement; // or Polymer.dom(e).localTarget
while (item.tagName !== 'MY-ELEMENT' && item.parentElement !== null)
  item = item.parentElement;
if (item.tagName === 'MY-ELEMENT')
  ... do something with the element ...

获取从事件中单击的Polymer元素

3 个答案: