javascript - 如果使用 CSS3 翻译/转换来更改元素位置，则不会触发 Mouseenter/Mouseover 事件

Question

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

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

当#wrapper 翻译时，它的 child 一个接一个地来到鼠标下(即使鼠标没有移动)。这不会触发 mouseenter 、 mouseleave 事件。

但是，当元素具有滚动条并通过鼠标滚轮滚动(而不是平移)时会触发事件。

这是默认行为吗？如果是，有什么解决方法吗？

Demo

尝试使用鼠标滚轮滚动，但不要移动鼠标。我希望将 .block 的背景更改为 red 颜色，但它没有发生。

Answer 1

示例:

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+
• 火狐浏览器 3+
• Safari Win 5+
• 谷歌浏览器 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 的 debounce或 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();
});