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

html

<ul class="box">
<li class="item"><img class="imgitem" src="./images/img (1).jpg" alt=""></li>
<li class="item"><img class="imgitem" src="./images/img (2).jpg" alt=""></li>
<li class="item"><img class="imgitem" src="./images/img (3).jpg" alt=""></li>
<li class="item"><img class="imgitem" src="./images/img (4).jpg" alt=""></li>
</ul>
js
$(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"
});
让大图出现的位置不要刚好在鼠标的位置

jQuery mouseove和mouseout事件不断触发的更多相关文章

  1. 关于jquery on方法进行事件绑定触发次数指数叠加的问题

    发生环境: $modal.on('click', '#search',function(e){}); 上面代码的语法是这样的: .on( events [, selector ] [, data ], ...

  2. jquery的监听事件和触发事件

    监听事件 $(selector).on('Event me',function(e){ //do something }) 触发事件 $(selector).trigger('Event name') ...

  3. jquery dialog的关闭事件不触发,触发不了

    在网上大部分是: close:function(event,ui){}; 但不管用,不过onClose:function(){};挺好使的,终于找到了

  4. jQuery mouseover,mouseout事件多次执行的问题处理

    控制鼠标移上移下事件,在使用Jquery 的mouseover,mouseout事件时,元素内部含有其它元素,会造成该事件多次的触发的情况. 问题解析 在用到mouseover和mouseout事件来 ...

  5. jquery移除、绑定、触发元素事件使用示例详解

    这篇文章主要介绍了jquery移除.绑定.触发元素事件使用示例详解,需要的朋友可以参考下. unbind(type [,data]) //data是要移除的函数 $('#btn').unbind(&q ...

  6. jquery mouseout事件冒泡解决方法

    在界面中最多使用的是div,如果一个div中包含多个div或img对象时, 针对mouseout鼠标移出事件时,并没有移出div层,但是当移动到div中的img时,也触发了该mouseout事件,这就 ...

  7. mouseover和mouseout事件在鼠标经过子元素时也会触发

    JavaScript的mouseover和mouseout事件,在绑定元素内部有子元素的情况下, 经过绑定元素时会多次触发mouseover和mouseout事件. jQuery解决办法: jquer ...

  8. 当一个HTML元素需要添加mouseon、mouseout与click事件,或者mouserenter、mouseleave和click事件时,click事件无法触发

    当一个HTML元素需要添加mouseon.mouseout与click事件,或者mouserenter.mouseleave和click事件时,click事件无法触发 针对上述问题,我遇到的有两种情况 ...

  9. jquery如何阻止子元素相应mouseout事件

    jquery如何阻止子元素相应mouseout事件:mouseout有一个特点,当鼠标移入子元素的时候,也会触发此事件,但是在实际应用中这个特点往往不是我们想要的,下面就通过代码实例介绍一下如何实现此 ...

随机推荐

  1. System.Net.Mail 邮件发送示例

    前言:OA自动发送邮件的程序不好使,SQL Server 存储过程邮件发送程序好使,但是不利于标准化和维护,于是觉得是适合找些“轮子”武装一下.想起之前学习过System.Net.Mail ,于是再次 ...

  2. SharePoint 2013 - Host-named Site Collection

    1. 详细操作可参考此文章 的 Deployment and configuration for host-named site collections区域,简单来说,需要以下三行PowerShell ...

  3. 如何编写自定义hive UDF函数

    Hive可以允许用户编写自己定义的函数UDF,来在查询中使用.Hive中有3种UDF: UDF:操作单个数据行,产生单个数据行: UDAF:操作多个数据行,产生一个数据行. UDTF:操作一个数据行, ...

  4. day22笔记

    用户上传的文件要保存 保存在服务器上的media文件夹下,用户上传的文件很多,所以需要分目录进行存放具体步骤 settings.pyMEDIA_URL="/media/"MEDIA ...

  5. 如何修改settings.xml的镜像

    今天在下载一个maven依赖包时候,下载后一直显示的是upload的jar包,然后检查了下自己的settings.xml配置,发现依赖的还是以前的内网nexus得配置.所以下载不下来,现在改为ali的 ...

  6. 【NLP_Stanford课堂】情感分析

    一.简介 实例: 电影评论.产品评论是positive还是negative 公众.消费者的信心是否在增加 公众对于候选人.社会事件等的倾向 预测股票市场的涨跌 Affective States又分为: ...

  7. DatagramSocket类 会发生线程阻塞的方法

    遇到这个问题,还告诉别人错了,这里来Mark一下. receive()方法会使调用线程阻塞. Java使用DatagramSocket代表UDP协议的Socket,DatagramSocket本身只是 ...

  8. postgresql+postgis+pgrouting实现最短路径查询(3)--流程图

    项目结束,做一个项目的总结汇报,就把最短路径查询的实现流程图画了一下,现在补出来:

  9. 郝斌 SqlServer2005 学习笔记

    1.0 什么是数据库 狭义:存储数据的仓库. 广义:可以对数据进行存储和管理的软件以及数据本身统称为数据库. 另外一种说法:数据库是由表.关系.操作组成. 2.0 为什么要学习数据库 几乎所有的应用软 ...

  10. MySQL语法三:数据控制语句

    数据控制语句MCL(GRANT,REVOKE,COMMIT,ROLLBACK)