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

我（通过jQuery/CSS3）通过更新

Y

axis来翻译

#包装器

div

我已将

mouseenter

/

mouseleave

事件附加到

#wrapper

的子元素

当

#wrapper

翻译时，它的子对象会一个接一个地出现在鼠标下（即使鼠标不动）。这不会触发

mouseenter

，

mouseleave

事件

但是，当元素具有滚动条并通过鼠标滚轮滚动（而不是转换）时，会触发事件

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

---

尝试在不移动鼠标的情况下使用鼠标滚轮滚动。我希望将

.block

的背景颜色更改为

红色

颜色，但实际情况并非如此。

示例：

document.elementFromPoint（x，y）

定义自：

返回其elementFromPoint方法为的文档中的元素
被调用的元素是位于给定元素下面的最上面的元素
指向要获取元素，请在CSS中通过坐标指定点
相对于窗口或帧中最左上角点的像素
包含文档的

浏览器支持来自：


Internet Explorer 5.5+
Mozilla FireFox 3+
狩猎胜利5+
谷歌浏览器4+
歌剧院10.53+

解决方案1*：

*有一些bug，但你明白了

解决方案2：

从或库中使用
debounce
，以减少客户端的负载

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

大多数事件仅由用户操作触发，而不是由浏览器本身的操作触发。例如，
change
仅在用户修改输入时触发，而不是在脚本分配给
元素.value
时触发。因此，
mouseenter
事件只有在用户将鼠标移动到元素中时才会触发，而不是当元素在鼠标下移动时才会触发。您从未使用过
scrollp（）
、
offset（）
或
scroll（）
，我在代码中找不到它，但在JSFIDLE中搜索代码很麻烦，必须粘贴到编辑器中。；）@Barmar，但在默认滚动的情况下会触发。好吧，@Jashwant，滚动是一种用户行为，因此Barmar仍然有一个观点。哇，很好的想法，但我不认为它是跨浏览器的。是IE9+是的，我也检查了怪癖模式，因此回答：（@Jashwant那么你想要的浏览器支持是什么呢？我会使用lodash或下划线
debounce
函数，延迟时间
100ms-200ms
，以避免浏览器被计算淹没。
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();
});