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

【问题标题】：Polymer paper-input suffix not working as expected聚合物纸张输入后缀未按预期工作
【发布时间】：2017-05-07 23:14:30
【问题描述】：

我有一个纸质输入，我使用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;
}

on-tap 不会触发，光标也不会显示为指针。

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

有什么想法吗？

我们将不胜感激。

【问题讨论】：

你是如何实现你的 _subscribeNewsletter 方法的？我试过了 - 它奏效了。
@sebastian 现在我只在函数中向控制台记录一条消息： _subscribeNewsletter : function(){ console.log('_subscribeNewsletter'); }

标签： input polymer paper-elements suffix

【解决方案1】：

试试下面的代码：

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

经过测试和工作就像一个魅力:-)

【讨论】：

好的，使用 img 标签我可以触发该功能，但我无法将我的 svg 调整到合适的大小
oups 对不起我的错，只是有一个思维错误。是的，适用于 img 标签。谢谢。但我仍然不知道对象有什么问题..

【解决方案2】：

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

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

我不明白为什么你的tap 听众不应该工作。它对我来说工作正常

【讨论】：

是的，我也注意到了。如果您提供错误的图像地址，则它可以工作。可能和object有关，不确定
看this
我会仔细研究一下并尝试了解对象 thx 的问题所在，现在塞巴斯蒂安的回答对我有用