聚合物纸张输入后缀未按预期工作

Question

我有一个纸张输入，其中我使用 suffix 属性通过 <object> 元素嵌套了一个 SVG。

现在我想通过点击 <object> 元素来调用函数。

所以这是我的代码：

HTML

<paper-input class="border" label="Deine Email-Adresse" no-label-float>
    <object suffix data="../icons/arrow.svg" type="image/svg+xml" on-tap="_subscribeNewsletter">
        <!--<img src="fallback.jpg" />-->
    </object>
</paper-input>

CSS

.newsletter-input paper-input object {
    height : 60px; 
    width : 100px; 
    position: absolute; 
    right: -10px; 
    margin-top: 3px;
    cursor: pointer;
}

不会触发点击，也不会将光标显示为指针。

输入本身嵌套在 .newsletter-input div 中，div 和输入都应用了更多样式，如果需要我可以将它们添加到，请告诉我。

有什么想法吗？

将不胜感激。

Answer 1

您的样式无效，因为您的 object 最终呈现在 paper-input 的 dom 中。所以你的选择器是错误的。如果您将 object 作为样式的唯一选择器，它将正常工作。

object {
            height : 60px; 
            width : 100px; 
            position: absolute; 
            right: -10px; 
            margin-top: 3px;
            cursor: pointer;
        }

而且我不明白为什么 tap 监听器不工作。它对我来说工作正常

Answer 2

试试下面的代码：

<paper-input class="border" label="Deine Email-Adresse" no-label-float>
    <img suffix src="../icons/arrow.svg" onerror="this.src='fallback.png'" on-tap="_subscribeNewsletter" />
</paper-input>

经过测试并且工作得很好 :-)

聚合物纸张输入后缀未按预期工作

Polymer paper-input suffix not working as expected

input

polymer

paper-elements

suffix