Javascript 聚合物网络组件内容单击事件未触发_Javascript_Polymer_Web Component_Dom Events_Shadow Dom

Javascript 聚合物网络组件内容单击事件未触发

javascript polymer

Javascript 聚合物网络组件内容单击事件未触发,javascript,polymer,web-component,dom-events,shadow-dom,Javascript,Polymer,Web Component,Dom Events,Shadow Dom,我刚刚创建了第一个元素作为测试，我遇到了一个点击事件的问题。My元素只是一个按钮，带有一个click事件以增加计数器，计数器显示为按钮文本的一部分。我还添加了一个内容标签，以便您可以向按钮添加其他文本当我在Chrome中单击按钮时，如果我单击内容文本，则不会触发单击事件。我必须实际单击按钮中的按钮元素/计数来触发事件。尽管在Firefox、Safari和Opera中，所有这些似乎都工作正常。我可以在这些浏览器中点击按钮的任何地方，点击事件就会触发。我做错什么了吗？这只是Chrome的一个bug

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

当我在Chrome中单击按钮时，如果我单击内容文本，则不会触发单击事件。我必须实际单击按钮中的按钮元素/计数来触发事件。尽管在Firefox、Safari和Opera中，所有这些似乎都工作正常。我可以在这些浏览器中点击按钮的任何地方，点击事件就会触发。我做错什么了吗？这只是Chrome的一个bug吗？这是我的密码：

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>

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


测试元件
一天三次

elements/my counter.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>

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


{{count}}
聚合物（“我的计数器”{
计数：0，
增量：函数（事件、详细信息、发送方）{
控制台日志（事件、详细信息、发送方）；
++这个.伯爵；
}
});

如果您想下载并自己测试它，这段代码也在GitHub上：

如果您将额外的文本包装在

span

中，它会工作

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

一天几次

看这个

我想这与

textNodes

不会触发大多数事件有关（请参阅）。如果将

LightDOM

和

ShadowDOM

与事件混合使用，请确保阅读此内容和此内容

与其他浏览器相比，您的代码在Chrome中的行为有所不同的原因是Chrome是当前唯一一个提供本机ShadowDOM实现的浏览器。Firefox将在几周内发布他们的产品。更多最新信息请点击此处：

太棒了！谢谢大家，这真的很有帮助！