Question

我遇到了浏览器的奇怪问题，我不确定如何正确修复它。在外部div上使用jquery的mouseleave事件让我在指针离开div时捕获事件而不为任何孩子开火。但是，工作得很好，添加一个可拖动的内部div并将其拖到外面会导致奇怪的行为：

最新Chrome：离开时不触发mouseleave，即使没有释放鼠标
Firefox：离开后不会触发mouseleave，将鼠标移到外面并正确移动它会触发事件

我真正需要的是在鼠标离开容器时立即获取mouseleave事件，无论我是否拖动。

这里是用于测试的相关jquery代码：

$('#outer')
    .on('mouseenter', function () {
    $('label').text('MOUSE ENTERED');
})
    .on('mouseleave', function () {
    $('label').text('MOUSE LEFT');
});

$('#dragger')
    .on('dragstart', function (evt) {
    evt.originalEvent.dataTransfer.effectAllowed = 'move';
    // dummy data as some browser may not drag otherwise
    evt.originalEvent.dataTransfer.setData('text/plain', '');
});

可以在此处查看相关的测试用例：http://jsfiddle.net/W5dgG/1/

Answer 1

想出答案。正如https://developer.mozilla.org/de/docs/DragDrop/Drag_and_Drop所述：

使用了许多在不同阶段被解雇的事件拖放操作。请注意，只会触发拖动事件; 拖动操作期间不会触发鼠标事件，例如mousemove。

因此，没有mousemove事件，因此jquery无法触发mouseleave事件。太糟糕了:(

Html5 DND和Jquery MouseLeave事件未触发

1 个答案: