我正在通过更新Y轴来翻译(通过jQuery /
CSS3)一个#wrapper div.
我已将mouseenter / mouseleave事件附加到#wrapper的子元素.
当#wrapper翻译时,它的孩子一个接一个地进入鼠标(即使鼠标不移动).这并不会触发mouseenter,mouseleave事件.
但是,当元素具有滚动条并通过鼠标滚轮滚动(而不是翻译)时会触发事件.
这是默认行为吗?如果是,任何解决方法?
尝试使用鼠标滚轮滚动,无需移动鼠标.我希望将.block的背景改为红色,但它没有发生.
解决方法
例:
document.elementFromPoint(x,y);
从Here定义:
Returns the element from the document whose elementFromPoint method is
@H_502_29@
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.> 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(); });