javascript – 如果使用CSS3 translate / transform更改元素位置,则不会触发Mouseenter / Mouseover事件

我正在通过更新Y轴来翻译(通过jQuery / CSS3)一个#wrapper div.

我已将mouseenter / mouseleave事件附加到#wrapper的子元素.

当#wrapper翻译时,它的孩子一个接一个地进入鼠标(即使鼠标不移动).这并不会触发mouseenter,mouseleave事件.

但是,当元素具有滚动条并通过鼠标滚轮滚动(而不是翻译)时会触发事件.

这是默认行为吗？如果是,任何解决方法？

Demo

尝试使用鼠标滚轮滚动,无需移动鼠标.我希望将.block的背景改为红色,但它没有发生.

解决方法

例：

document.elementFromPoint(x,y);

从Here定义：

Returns the element from the document whose elementFromPoint method is
being called which is the topmost element which lies under the given
point. To get an element,specify the point via coordinates,in CSS
pixels,relative to the upper-left-most point in the window or frame
containing the document.

Here的浏览器支持：

> Internet Explorer 5.5
> Mozilla FireFox 3
> Safari Win 5
>谷歌Chrome 4
> Opera 10.53

解决方案1 ​​Working Example *：

var currentMousePos = { x: -1,y: -1 };
$(document).mousemove(function(event) {
    currentMousePos.x = event.pageX;
    currentMousePos.y = event.pageY;
});
$(containerElement).mousewheel(function(event) {
    $(elementClass).trigger('mouseleave');
    var element = document.elementFromPoint(currentMousePos.x,currentMousePos.y);
    $(element).trigger('mouseenter');
});

*有一些错误,但你明白了

解决方案2：

使用lodash或underscore库中的去抖动,以减少客户端的负载.

var currentMousePos = { x: -1,y: -1 };
$(document).mousemove(function (event) {
    currentMousePos.x = event.pageX;
    currentMousePos.y = event.pageY;
});
var debounced = _.debounce(function () {
    $(elementClass).trigger('mouseleave');
    var element = document.elementFromPoint(currentMousePos.x,currentMousePos.y);
    $(element).trigger('mouseenter');
},150);
$(containerElement).mousewheel(function (event) {
    debounced();
});