Ember.js 在应用程序和测试中，余烬事件触发顺序不同

我编写了这个简单的演示组件来演示一个问题。组件代码如下所示

App.FocusOutComponent = Em.Component.extend({
  attributeBindings: ['tabindex'],

  tagName: 'focus-out',

  setFocus: function() {
    console.log('clicked focus-out container');
    this.$().find('button').focus();
    console.log('focus set to button');
  }.on('click'),

  focussedOut: function() {
    console.log('focussedOut from outer container');
  }.on('focusOut'),
});

{{#focus-out id="focus-container" tabindex="-1"}}
  <button id="text-button">Test Button</button>
{{/focus-out}}

日志的顺序不同

单击焦点输出容器

焦点设置到按钮

点击测试后

聚焦从外部容器中取出

将

focusOut

日志打印在最末尾，而不是在单击后日志之前。我希望日志的顺序是一样的，最后只需要一个额外的日志（单击后）。

我不确定这是一个错误还是我的代码有问题

在执行测试时，我还注意到另一个问题。如果我在测试运行时关注chrome开发工具，则根本不会触发

focusOut

事件。

---

非常感谢您的帮助。

单击事件不会设置焦点（作为后门路线）。您需要手动设置焦点，然后单击以获得相同的结果

余烬的单击辅助对象（发送鼠标向下/mouseup，然后单击） 改良试验

同样重要的是要注意，拆卸也会调用focus out事件。所以你看到焦距消失的主要原因是因为在拆卸时，它失去了按钮子的焦距

---

在余烬测试中，也许应该在鼠标向下移动到click helper上之前设置焦点，尽管我不确定还有什么可能会影响，或者人们通常不会期望，因为jquery不会这样做。

谢谢，所以我看到的主要问题是，

teardown

会导致focusout事件。有什么我可以避免的吗？另外，如果我在开发工具中有焦点，则不会触发focusOut事件，因此没有错误。我之所以询问开发工具焦点问题，是因为travis ci运行我的测试时没有错误。所以我怀疑focusOut不会触发，因此没有错误。这是原来的问题好了，现在我把它修好了。在所有测试之后，我将焦点设置为隐藏的输入字段，现在焦点输出不会在拆卸时触发。

test('test visit / and click button', function() {
  expect(0);
  visit('/').then(function() {
    find('focus-out').click();
    console.log('after click in test');
  });
});

function click(app, selector, context) {
  var $el = app.testHelpers.findWithAssert(selector, context);
  run($el, 'mousedown');

  if ($el.is(':input')) {
    var type = $el.prop('type');
    if (type !== 'checkbox' && type !== 'radio' && type !== 'hidden') {
      run($el, function(){
        // Firefox does not trigger the `focusin` event if the window
        // does not have focus. If the document doesn't have focus just
        // use trigger('focusin') instead.
        if (!document.hasFocus || document.hasFocus()) {
          this.focus();
        } else {
          this.trigger('focusin');
        }
      });
    }
  }

  run($el, 'mouseup');
  run($el, 'click');

  return app.testHelpers.wait();
}

test('test visit / and click button', function() {
  expect(0);
  visit('/').then(function() {
    var el = find('focus-out');
    el.focus();
    click(el);
    console.log('after click in test');
  });
});