关于锋利的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. Web前端面试指导(十三):css样式的优先级是怎么样的?

    题目点评 CSS样式的优先级规则给人的感觉总是摸不透,更不用说怎么去表达了,在网络上流传着很多版本,描述的都很复杂也不全面,看了之后还是不满意.我来给大家介绍一个比较系统.全面有比较容易记住的规则吧! ...

  2. 2 (自我拓展)部署花的识别模型(学习tensorflow实战google深度学习框架)

    kaggle竞赛的inception模型已经能够提取图像很好的特征,后续训练出一个针对当前图片数据的全连接层,进行花的识别和分类.这里见书即可,不再赘述. 书中使用google参加Kaggle竞赛的i ...

  3. 用虚拟信用卡注册Google Play开发者账号

    本文首发于http://www.abcdsxg.cn/free/net/562 虚拟信用卡 首先介绍一下虚拟信用卡(Virtual Credit Card),顾名思义,虚拟就是没有实体卡,一般都是在提 ...

  4. idea output 消失找不到

    今天一不小心把idea的 debug的控制台output 搞丢了, 半天找不到,原来是在这里隐藏着 Restore layout

  5. 配置spark集群

    配置spark集群 1.配置spark-env.sh [/soft/spark/conf/spark-env.sh] ... export JAVA_HOME=/soft/jdk 2.配置slaves ...

  6. centos msyql 5.7 yum安装

    1.wget https://repo.mysql.com//mysql57-community-release-el6-11.noarch.rpm 2.yum localinstall mysql5 ...

  7. 如何控制table中td内的文本位置

    默认为左中效果    td中垂直用valign 取值为:top/middle/bottom/baseline,水平用align 取值为:left,center,right;

  8. June 24th 2017 Week 25th Saturday

    Who is able to be egotistical needs to be strong too. 有本事任性的人,也要有本事坚强. What is egotistical? Is it th ...

  9. 有时间,可以研究哈redis的源代码

    1 2 3 4 留位,以后自己用!

  10. .NET事务

    概述 事务ACID特性 事务将一系列的工作视为一个工作单元,它具有 ACID 特性: A:Atomicity 不可分性也就是说事务中有多项工作,如果有一项工作失败了,整个事务就算失败了. C:Cons ...