javascript - 无法在 MooTools 中以编程方式触发 mouseenter

Question

我正在编写单元测试，我需要触发 mouseenter 以确保处理程序附加到某个元素并且它在回调中做正确的事情。但是，我花了很多时间在上面，发现它似乎只是鼠标事件……我想。 http://jsbin.com/EZIriqA/1/edit

它应该触发两个警报。一个用于“双击”，一个用于“鼠标输入”。它只会发射一个。代码是相同的(我通过复制和粘贴它并只是更改事件名称来确保)。

代码如下:

$('foo').addEvent('mouseenter:relay(li[data-type])', function () {
  alert('Mouse Enter');
});

$('foo').fireEvent('mouseenter', {
  target: $$('li[data-type]')[0]
});

$('foo').addEvent('dblclick:relay(li[data-type])', function () {
  alert('Double Click');
});

$('foo').fireEvent('dblclick', {
  target: $$('li[data-type]')[0]
});

如果无法触发 mouseenters，我该如何测试代码？我可以将所有代码移动到类上的方法，在此处分配它们，但我没有编写此代码，我编写单元测试的原因是为了安全地重构所有代码。

Answer 1

免责声明:喝醉了。但是:这是因为 mootools 在它成为 native 事件之前有点开创了 mouseenter(连同原型(prototype))。 mouseenter 实际上是扩展了 polyfill 中的 mouseover。 delegated mouseenter 实际上不是一个好的做法 - 它有很多问题，被认为是使用 mouseover:relay() 更好的主意。

这是最近添加的 (1.4.4/5) - https://github.com/mootools/mootools-core/blob/master/Source/Element/Element.Event.js#L156-L162 - Element.NativeEvents.mouseenter = 2; 位。不确定它是否在委托(delegate)人级别上有效。

无论如何 - 因为 mouseenter 有 mouseover 作为基础，你可以 parentel.fireEvent('mouseover', { target: el }) 和没事的。

我知道这是伪代码，但您似乎仍然没有按照最佳实践使用 mootools。

document.id('the-sandbox').set('html', '<ul id="foo"><li data-type="foo">Foo</li><li data-type="bar">Bar</li></ul>');
var t = document.getElement('li[data-type]'),
    foo = document.id('foo');

foo.addEvents({
  'mouseenter:relay(li[data-type])': function () {
    console.log('Mouse Enter'); 
  },
  'dblclick:relay(li[data-type])': function () { 
    console.log('Double Click');
  }  
});

foo.fireEvent('mouseover', { 
  target: t
}).fireEvent('dblclick', {
  target: t
});

区别:即使 $ 返回一个 el，也使用元素 api。 new Elements/prime 选择器不会返回元素，将被包装。选择器应该被缓存。 $$ 应该被缓存，但最好使用 document.getElement -> querySelector vs $$ -> querySelectorAll()[0 ]。

此外，如果你想对这些进行测试，我建议使用 Syn(合成事件库，在 github 上)之类的东西——它真的很像一个迷你网络驱动程序，你可以告诉它鼠标悬停、单击、键入等。非常方便如果您不介意跨越单元测试和端到端/集成测试之间的测试边界。