jQuery mouseove和mouseout事件不断触发
关于锋利的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>
$(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后依旧不管用,想了很久才发现原因:
当鼠标进去某一张图片后,我设置大图出现的位置刚好是鼠标的位置,该位置上方是大图出现的位置,下面是原图,所以才会不断闪烁
解决方案:
jQuery mouseove和mouseout事件不断触发的更多相关文章
- 关于jquery on方法进行事件绑定触发次数指数叠加的问题
发生环境: $modal.on('click', '#search',function(e){}); 上面代码的语法是这样的: .on( events [, selector ] [, data ], ...
- jquery的监听事件和触发事件
监听事件 $(selector).on('Event me',function(e){ //do something }) 触发事件 $(selector).trigger('Event name') ...
- jquery dialog的关闭事件不触发,触发不了
在网上大部分是: close:function(event,ui){}; 但不管用,不过onClose:function(){};挺好使的,终于找到了
- jQuery mouseover,mouseout事件多次执行的问题处理
控制鼠标移上移下事件,在使用Jquery 的mouseover,mouseout事件时,元素内部含有其它元素,会造成该事件多次的触发的情况. 问题解析 在用到mouseover和mouseout事件来 ...
- jquery移除、绑定、触发元素事件使用示例详解
这篇文章主要介绍了jquery移除.绑定.触发元素事件使用示例详解,需要的朋友可以参考下. unbind(type [,data]) //data是要移除的函数 $('#btn').unbind(&q ...
- jquery mouseout事件冒泡解决方法
在界面中最多使用的是div,如果一个div中包含多个div或img对象时, 针对mouseout鼠标移出事件时,并没有移出div层,但是当移动到div中的img时,也触发了该mouseout事件,这就 ...
- mouseover和mouseout事件在鼠标经过子元素时也会触发
JavaScript的mouseover和mouseout事件,在绑定元素内部有子元素的情况下, 经过绑定元素时会多次触发mouseover和mouseout事件. jQuery解决办法: jquer ...
- 当一个HTML元素需要添加mouseon、mouseout与click事件,或者mouserenter、mouseleave和click事件时,click事件无法触发
当一个HTML元素需要添加mouseon.mouseout与click事件,或者mouserenter.mouseleave和click事件时,click事件无法触发 针对上述问题,我遇到的有两种情况 ...
- jquery如何阻止子元素相应mouseout事件
jquery如何阻止子元素相应mouseout事件:mouseout有一个特点,当鼠标移入子元素的时候,也会触发此事件,但是在实际应用中这个特点往往不是我们想要的,下面就通过代码实例介绍一下如何实现此 ...
随机推荐
- Web前端面试指导(十三):css样式的优先级是怎么样的?
题目点评 CSS样式的优先级规则给人的感觉总是摸不透,更不用说怎么去表达了,在网络上流传着很多版本,描述的都很复杂也不全面,看了之后还是不满意.我来给大家介绍一个比较系统.全面有比较容易记住的规则吧! ...
- 2 (自我拓展)部署花的识别模型(学习tensorflow实战google深度学习框架)
kaggle竞赛的inception模型已经能够提取图像很好的特征,后续训练出一个针对当前图片数据的全连接层,进行花的识别和分类.这里见书即可,不再赘述. 书中使用google参加Kaggle竞赛的i ...
- 用虚拟信用卡注册Google Play开发者账号
本文首发于http://www.abcdsxg.cn/free/net/562 虚拟信用卡 首先介绍一下虚拟信用卡(Virtual Credit Card),顾名思义,虚拟就是没有实体卡,一般都是在提 ...
- idea output 消失找不到
今天一不小心把idea的 debug的控制台output 搞丢了, 半天找不到,原来是在这里隐藏着 Restore layout
- 配置spark集群
配置spark集群 1.配置spark-env.sh [/soft/spark/conf/spark-env.sh] ... export JAVA_HOME=/soft/jdk 2.配置slaves ...
- centos msyql 5.7 yum安装
1.wget https://repo.mysql.com//mysql57-community-release-el6-11.noarch.rpm 2.yum localinstall mysql5 ...
- 如何控制table中td内的文本位置
默认为左中效果 td中垂直用valign 取值为:top/middle/bottom/baseline,水平用align 取值为:left,center,right;
- June 24th 2017 Week 25th Saturday
Who is able to be egotistical needs to be strong too. 有本事任性的人,也要有本事坚强. What is egotistical? Is it th ...
- 有时间,可以研究哈redis的源代码
1 2 3 4 留位,以后自己用!
- .NET事务
概述 事务ACID特性 事务将一系列的工作视为一个工作单元,它具有 ACID 特性: A:Atomicity 不可分性也就是说事务中有多项工作,如果有一项工作失败了,整个事务就算失败了. C:Cons ...