![](/img/trans.png)
[英]Polymer Paper-Button created in JavaScript click event not firing
[英]Polymer web component content click event not firing
我刚刚创建了我的第一个元素作为测试,并且遇到了单击事件。 我的元素只是带有单击事件的按钮,以增加一个计数器,该计数器显示为按钮文本的一部分。 我还添加了一个内容标签,以便您可以向按钮添加其他文本。
当我单击Chrome中的按钮时,如果单击内容文本,则不会触发click事件。 我必须实际单击按钮元素/按钮中的计数才能触发事件。 尽管在Firefox,Safari和Opera中,所有功能似乎都能正常运行。 我可以在这些浏览器中的按钮上的任意位置单击,然后将触发click事件。 难道我做错了什么? 这只是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
如果将多余的文本包装在一个span
它将起作用。
<my-counter><span>Times a Day</span></my-counter>
看到这个JSbin 。
我想这与以下事实有关: textNodes
不会触发大多数事件(请参阅此处 )。 如果将LightDOM
和ShadowDOM
与事件混合使用,请确保已阅读本文和本SO线程 。
您的代码在Chrome与其他浏览器中的行为有所不同的原因是,Chrome是当前唯一提供本机影子dom实现的浏览器。 Firefox将在几周内发货。 此处有更多最新信息: caniuseit-shadowdom
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.