Javascript 聚合物霓虹元素-使元素内的图像也触发动画 开发页面

最初的谷歌聚合物演示

问题 在dev页面上单击（圆形）容器内的（圆形）图像不会触发动画

我的目标 当访问者单击图像本身时，触发_onClick方法（可以在的源代码中看到）

\u单击方法代码：

_onClick: function(event) {
  var target = event.target;
  var target_id = target.getAttribute('data-id');

  if (target.classList.contains('circle')) {
    // configure the page animation
    this.sharedElements = {
      'hero': target
    };

    var nodesToScale = [];
    var circles = Polymer.dom(this.root).querySelectorAll('.circle');
    for (var node, index = 0; node = circles[index]; index++) {
      if (node !== event.target) {
        nodesToScale.push(node);
      }
    }
    this.animationConfig['exit'][1].nodes = nodesToScale;

    this.fire('circle-click', {targetId: target_id});
  }
}

相关区域的屏幕截图

问题 这样做的正确方式是什么

谢谢。

这对我很有用：

<div class="horizontal layout">
  <div class="circle center-center horizontal layout" data-id="person1"><img src="https://idrycleaningi.com/image/nino/our_team/mich.jpg" data-id="person1" class="circle-image"></div>
  <div class="circle center-center horizontal layout" data-id="person2"><img src="https://idrycleaningi.com/image/nino/our_team/nino.jpg" data-id="person2" class="circle-image"></div>
  <div class="circle center-center horizontal layout" data-id="person3"><img src="https://idrycleaningi.com/image/nino/our_team/snowden.jpg" data-id="person3" class="circle-image"></div>
  <div class="circle center-center horizontal layout" data-id="person4"><img src="https://idrycleaningi.com/image/nino/our_team/bump.jpg" data-id="person4" class="circle-image"></div>
</div>

我所做的是将circle image类添加到图像中，然后，除了检查circle类（从Divs），我还允许使用circle image类（从图像中）。

这对我很有用：

<div class="horizontal layout">
  <div class="circle center-center horizontal layout" data-id="person1"><img src="https://idrycleaningi.com/image/nino/our_team/mich.jpg" data-id="person1" class="circle-image"></div>
  <div class="circle center-center horizontal layout" data-id="person2"><img src="https://idrycleaningi.com/image/nino/our_team/nino.jpg" data-id="person2" class="circle-image"></div>
  <div class="circle center-center horizontal layout" data-id="person3"><img src="https://idrycleaningi.com/image/nino/our_team/snowden.jpg" data-id="person3" class="circle-image"></div>
  <div class="circle center-center horizontal layout" data-id="person4"><img src="https://idrycleaningi.com/image/nino/our_team/bump.jpg" data-id="person4" class="circle-image"></div>
</div>

---

我所做的是将circle image类添加到图像中，然后，除了检查circle类（从Divs中），我还允许使用circle image类（从图像中）。

您的链接不起作用。。。这就是为什么您几乎总是应该在问题中包含代码的原因。@JustinXL您是对的，但由于SO编辑器，它变得混乱了。正在修复。你的链接不起作用。。。这就是为什么您几乎总是应该在问题中包含代码的原因。@JustinXL您是对的，但由于SO编辑器，它变得混乱了。现在修好。