首页 文章

聚合物Web组件内容单击事件未触发

提问于
浏览 次
0

我刚刚创建了我的第一个元素作为测试，我遇到了一个点击事件的问题 . 我的元素只是一个带有单击事件的按钮，用于递增计数器，该计数器显示为按钮文本的一部分 . 我还添加了一个内容标记，以便您可以向按钮添加其他文本 .

当我点击Chrome中的按钮时，如果点击内容文字，则不会触发点击事件 . 我必须实际点击按钮元素/按钮中的计数才能触发事件 . 所有这些似乎都在Firefox，Safari和Opera中正常运行 . 我可以点击这些浏览器中按钮的任意位置，然后点击事件就会触发 . 难道我做错了什么？这只是Chrome的一个错误吗？这是我的代码：

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Test Element</title>
    <script src="bower_components/platform/platform.js"></script>
    <link rel="import" href="elements/my-counter.html">
</head>
<body unresolved touch-action="auto">
    <my-counter count=5>Times a Day</my-counter>
</body>
</html>

elements/my-counter.html

<link rel="import" href="../bower_components/polymer/polymer.html">

<polymer-element name="my-counter" attributes="count">
    <template>
        <button on-click="{{increment}}">{{ count }} <content></content></button>
    </template>
    <script>
    Polymer('my-counter', {
        count: 0,
        increment: function(event, detail, sender) {
            console.log(event, detail, sender);
            ++this.count;
        }
    });
    </script>
</polymer-element>

如果您想下载并自行测试，此代码也在GitHub上：https://github.com/andersryanc/playing-with-polymer/tree/master/my-counter

javascript polymer web-component dom-events shadow-dom

1 回答

  • 2

    如果你将额外的文本包装在 span 中就可以了 .

    <my-counter><span>Times a Day</span></my-counter>

    见JSbin .

    我想这与 textNodes 不会触发大多数事件的事实有关（参见here） . 如果将 LightDOM 和 ShadowDOM 与事件混合，请确保阅读此article和此SO thread .

    您的代码在Chrome与其他浏览器中的行为不同的原因是Chrome目前是唯一一个提供原生影子dom实施的浏览器 . Firefox将在几周内发布 . 更多最新信息：caniuseit - shadowdom

    回复于

相关问题