Question

我有以下应用：

滑动条由顶层和底层组成。底层是一个按钮组件。当我滑开顶层并尝试单击按钮时，只需点击滑动组件，不按钮。

可能是什么问题？

模板：

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

Ember Code

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');
  }
})

完整资源

还有JSBin for the full code

编辑：

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

Answer 1

已经有一个堆栈溢出问题，它回答了嵌套组件冒泡的事件＆＃39;这是Ember: nested components events bubbling

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

Answer 2

问题不在你的Ember代码中，它可以很好地工作，但仅限于你设置的CSS z-index值。具有负z-index的元素不会收到任何点击事件。只需与http://jsbin.com/haxovaxe/1/进行比较。

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

编辑：

2 个答案: