关于锋利的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. 08_Redis持久化——RDB方式

    [简述] 持久化:Redis能将数据从内存中以某种形式同步到硬盘中,使得重启后可以根据硬盘中的记录恢复数据,这一过程就是持久化. Redis支持两种方式的持久化,简单来说如下: RDB方式:会根据指定 ...

  2. Windows Server 2008 R2配置JSP网站无法访问

    在Windows Server 2008 R2中配置好JSP网站后,在本机可以使用 localhost访问网站,但是局域网内其机器无法访问,则需要在Windows Server 2008 R2的系统管 ...

  3. 面试准备之三Django知识

    Django请求流程 MTV模式 路由 视图 ORM 模板

  4. 针对通过 SSH 连接到 Azure Linux VM 时发生的失败、错误或被拒绝问题进行故障排除

    尝试连接到 Linux 虚拟机 (VM) 时,有多种原因可能会导致安全外壳 (SSH) 错误.SSH 连接失败或被拒绝. 本文帮助用户找出原因并更正问题. 可以使用 Azure 门户.Azure CL ...

  5. Linux->Ubuntu配置tomcat开机自动启动

    Ubuntu配置tomcat开机自动启动 我们有时候会有这样一个需求: 在开机的时候就启动一个服务,比如tomcat. 我们可以这样做: 将tomcat目录下/bin中的catalina.sh拷贝到/ ...

  6. Kibana基本使用

    现在你已经安装了Kibana,现在你一步步通过本教程快速获取Kibana核心功能的实践经验.学习完本教程,你将: 1.加载案例数据到你安装的Elasticsearch中 2. 定义至少一个索引匹配模式 ...

  7. kill -9 和kill-15的区别

    kill -9大家应该是非常熟悉的,杀死进程一般用kill -9的吧. 今天接触到kill -15,kill -15也是杀死进程的.那个kill -15和kill -9有什么区别呢? 其实kill - ...

  8. 新浪OAuth网络登录,请求access_token时遇到21323的错误

    按照新浪给出的文档写了,但是遇到错误,总是获取不到token值,也是post方式提交的. 查阅百度资料,发现有网友给出了解决办法,是因为 文档中有这么一句提示: HTTP请求方式:POST 这句话太简 ...

  9. phonegap 捕获图片,音频,视屏 api capture

    一. capture Api 简单介绍 capture 对象用于获取视屏,音频和图像,它是一个全局对象,通过 navigator.device.capture 来访问 方法: capture.capt ...

  10. Python解析配置文件模块:ConfigPhaser

    算是前几周落下的博客补一篇.介绍一下python中如何解析配置文件.配置文件常用的几种格式:xml,json,还有ini.其中ini算是最简单的一种格式,因为小,解析的速度也要比xml和json快(并 ...