jQuery mouseove和mouseout事件不断触发

时间：2019-04-05 00:17:38 阅读：226 评论：0 收藏：0 [点我收藏+]

关于锋利的jQuery第三章结尾提示图片效果(鼠标放在图片上会出现一个大图跟随鼠标移动)实现时mouseove和mouseout事件不断触发的问题

html

</ul>

$(function(){

var tooltip;

$(‘.imgitem‘).mouseover(function(e) {

tooltip = "<div id=‘tooltip‘><img src=‘" + $(this).attr(‘src‘) + " ‘></div>";

$(‘body‘).append(tooltip);

$(‘#tooltip‘).css({

"position": "fixed",

"top": e.pageY + "px",

"left": e.pageX + "px"

});

}).mousemove(function(e){

$(‘#tooltip‘).css({

"position": "fixed",

"top": e.pageY + "px",

"left": e.pageX + "px"

});

}).mouseout(function() {

$(‘#tooltip‘).remove();

});

})

跟书上的代码不太一样

我发现mouseover和mouseout事件不断出发，以至于造成鼠标旁边的大图不断闪烁，网上百度闪烁的原因是事件冒泡

技术图片

但我试着把mouseover和mouseout事件名改为mouseenter和mouseleave后依旧不管用，想了很久才发现原因：

当鼠标进去某一张图片后，我设置大图出现的位置刚好是鼠标的位置，该位置上方是大图出现的位置，下面是原图，所以才会不断闪烁

解决方案：

$(‘#tooltip‘).css({

"position": "fixed",

"top": e.pageY + 10 + "px",

"left": e.pageX + 20 + "px"

});

让大图出现的位置不要刚好在鼠标的位置

原文地址：https://www.cnblogs.com/dyegral/p/10657643.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行