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

Question

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

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

当#wrapper翻译,其子一(即使鼠标不动)来下鼠标一个.这不火的mouseenter,mouseleave事件.

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

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

演示

尝试使用鼠标滚轮滚动,无需移动鼠标.我希望改变的背景下.block,以red颜色,但它没有发生.

Answer 1

示例:

document.elementFromPoint(x, y);

从这里定义:

返回正在调用elementFromPoint方法的文档中的元素,该元素位于给定点下面的最顶层元素.要获取元素,请通过坐标(以CSS像素为单位)指定相对于包含文档的窗口或框架中最左上角点的点.

这里的浏览器支持:

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

解决方案1 工作示例*:

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:

使用debounce从lodash或下划线库,以减少对客户端负载.

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