从事件中获取被点击的 Polymer 元素

Question

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

<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

您可以监听 child 元素上的事件并通过触发 'handeTapped' 事件将其传递给 parent。

test-button-click-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 );
}

page-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 元素中，您检查事件是直接触发的还是由 child 触发的。

注意：这似乎有点老套，我只在 chrome 上测试过。

Answer 2

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

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

换句话说，将 e.target 替换为 Polymer.dom(e).localTarget 将为您提供自定义元素，而不是自定义元素中的 HTML。

在此处详细了解影子 DOM 与阴暗 DOM 事件定位： https://www.polymer-project.org/1.0/docs/devguide/events.html#retargeting

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 元素

Get Polymer element that was clicked on from event

polymer-1.0