Ember.js EmberJS：滑动条中的嵌套组件不会触发事件

我有以下应用程序：

滑杆由顶层和底层组成。底层是一个按钮组件。 当我滑动顶层并尝试单击按钮时，只会单击滑动组件，而不会单击按钮

有什么问题吗

模板：

<script type="text/x-handlebars" data-template-name="index">
  <h2>Sliding Bar Test</h2>
  
  {{#sliding-bar}}
    {{button-click}}
  {{/sliding-bar}}
</script>

<script type="text/x-handlebars" data-template-name="components/sliding-bar">
  <div class="bar top">
    This is on Top
  </div>
  <div class="bar bottom">
    {{yield}}
  </div>
</script>

<script type="text/x-handlebars" data-template-name="components/button-click">
    Click Me
</script>

完整来源

window.App = Ember.Application.create();

App.SlidingBarComponent = Ember.Component.extend({
  click: function () {
    alert('slider clicked');
  },

  didInsertElement: function() {
    var topElem = this.$('.top');
    TweenMax.to(topElem, 0.25, {css:{left:-148}, overwrite:"all"});
  }
})

App.ButtonClickComponent = Ember.Component.extend({
  tagName: 'span',
  classNames: ['button'],

  click: function () {
    alert('button clicked');
  }
})

还有一个

编辑：

---

我将lis更改为DIV，但问题仍然存在。有什么想法吗？

已经有一个堆栈溢出问题，它回答了“嵌套组件事件冒泡”。给你

---

已接受的答案包含bin和解决方案。简而言之，您需要使用targetObject绑定冒泡链。如果有帮助，请告诉我。

问题不在于您的余烬代码工作正常，而在于您设置的CSS z索引值。具有负z索引的元素不会接收任何单击事件。比较一下。

谢谢你的建议。你建议的答案是关于从按钮开始的事件冒泡。我甚至没有从按钮中获取事件。滑块组件捕获事件，并且不会将其委托给按钮。我得到的是滑块的点击，而不是按钮的点击…你是对的！看起来我正在使用的css也相当混乱。需要做一些清理工作，并对它的工作充满信心。谢谢！