鼠标 mouseover和mouseout事件

在div内想实现鼠标移入移出效果,最开始的时候是用了jquery的mouseout和mouseover事件来实现的, $('.product).mouseover(function(){ …… }).mouseout(function(){ …… }); 但是当鼠标在div内的元素移动时也触发了mouseout事件,第一时间想到的是自己代码是不是写错了,但是检查了很多遍,发现没有问题的, 既然代码没有问题,那为什么会出现这种情况?后面想不到原因就上网搜索下,结果发现确实是存在这种情况,解决方法是…

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

JavaScript的mouseover和mouseout事件,在绑定元素内部有子元素的情况下, 经过绑定元素时会多次触发mouseover和mouseout事件. jQuery解决办法: jquery的mouseenter和mouseleave方法已经修复了这个问题,可以直接用来替代mouseover和mouseout 不过有个mouseenter和mouseleave有个小问题是,让鼠标从文档外直接进入绑定事件的元素时,mouseenter不生效暂时解决办法是,别让绑定事件的元素靠浏览器边…

mouseover和mouseout事件的相关元素

在发生mouseover和mouseout事件时,还会涉及更多的元素,这两个事件都会涉及把鼠标指针从一个元素的边界之内移动到另一个元素的边界之内.对mouseover事件而言,事件的主目标获得光标元素,而相关元素就是那个失去贯标的元素. 例如: 对mouseout而言,事件的主目标是失去光标的元素,而相关的元素则是获得光标的元素 <body> <div style='widtyh:200px;height:200px;background:blue'></div> &l…

mouseover和mouseout事件引发的BUG-解决方法

mouseover和mouseout引发的BUG原由当给一个元素添加mouseover或mouseout事件,这个元素还有子元素. 由于子元素的事件冒泡,鼠标移入或移出子元素都会触发事件. 解决的方法:根据event对象判断是否为子元素 JQuery解决方法 JQuery可以用mouseenter代替mouseover,mouseleave代替mouseout. 还可以用hover()方法. JavaScript原生解决方法原生的方法解决就需要了解一下relatedTarget.fromEl…

鼠标焦点变化引起mouseout事件

做了个小手术,渐渐回归网络啦! 问题: 在自制的提示离鼠标太近时,会引起无法提示的功能. 自制提示离图片太近时,提示图片一直一闪一闪的,截图截不出来,就只放改善后的图片(不闪). 原因: 为什么呢?书上说是因为"鼠标焦点变化引起mouseout事件". 现在有点不太理解,只能是以后多加注意再理解了. 大家可以一起交流呀.…

mouseover 和 mouseout 事件是可以冒泡的取消

mouseover 和 mouseout 事件是可以冒泡的,子元素上触发的事件会冒泡到父元素上.可以改用 mouseleave 和 mouseenter 事件,这两个事件不冒泡.…

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

控制鼠标移上移下事件,在使用Jquery 的mouseover,mouseout事件时,元素内部含有其它元素,会造成该事件多次的触发的情况. 问题解析在用到mouseover和mouseout事件来作为事件触发的条件,单一元素可以正常使用,但是如果我们用做触发的元素内部有其他的元素的时候当鼠标移上的时候会反复的触发mouseover和mouseout事件.因为内部元素在鼠标移上的时候会向它的父对象派发事件,所以外面元素相当于也触发了mouseover 事件. 解决方法 jquery(需要版本…

mouseover、mouseout，mouseenter、mouseleave区别

心情压抑的一天,我想好好的. mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseout与mouseleave 不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件. 只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件. mouseover.mouseout事件冒泡…

mouseover和mouseout闪烁问题

在父级元素上注册了mouseover和mouseout事件后,当鼠标移动到子元素上时,会触发父级的mouseout和mouseover事件,反复触发,形成闪烁. 原因: 一种是由于冒泡,子级的mouseover和mouseout触发了父级的mouseover和mouseout,一种是不明原因,也会造成这个现象. 解决方法: 1. setTimeout,类似于debounce处理 $('div').mouseout(function(){ clearTimeout(t); …

mouseover和mouseout多次触发解决方法(兼容ie和firefox)（转）

在用到mouseover和mouseout事件来作为事件触发的条件,但是如果我们用做触发的元素内部有其他的元素的时候当鼠标移上的时候会反复的触发mouseover和mouseout事件,如导致菜单闪烁等问题.因为内部元素在鼠标移上的时候会向它的父对象派发事件,所以外面元素相当于也触发了mouseover 事件. 为了阻止mouseover和mouseout的反复触发,这里要用到event对象的一个属性relatedTarget,这个属性就是用来判断 mouseover和mouseout事件目标节…

Jquery hover方法使用及 mouseenter与mouseleave和 mouseover与mouseout的区别

定义和用法 hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数. jQuery 1.7 版本前该方法触发 mouseenter 和 mouseleave 事件. jQuery 1.8 版本后该方法触发 mouseover和 mouseout事件. 语法 $(selector).hover(inFunction,outFunction)//inFunction 必需,规定 mouseover 事件发生时运行的函数:outFunction 可选,规定 mouseout 事件发生时运…

mouseover、mouseout和mouseenter、mouseleave

这里直接把<Javascript 高级程序设计(第三版)>中的解释贴出来: mouseover:在鼠标指针位于一个元素外部,然后用户将其首次移入另一个元素边界之内时触发.不能通过键盘触发这个事件. mouseout:在鼠标指针位于一个元素上方,然后用户将其移入另一个元素时触发.又移入的另一个元素可能位于前一个元素的外部,也可能是这个元素的子元素.不能通过键盘触发这个事件. mouseenter:在鼠标光标从元素外部首次移动到元素范围之内时触发.这个事件不冒泡,而且在光标移动到后代元素上时不会触…

jQuery中hover与mouseover和mouseout的区别分析

本文实例分析了jQuery中hover与mouseover和mouseout的区别.分享给大家供大家参考,具体如下: 以前一直以为在jquery中其实mouseover和mouseout两个事件等于hover事件.两个没什么区别,应该是一样的.但昨天一个动画效果才让我见识了,这两个并不能等同. <div class="wrapper"> <div class="img"></div> <div class="tex…

jQuery mouseove和mouseout事件不断触发

关于锋利的jQuery第三章结尾提示图片效果(鼠标放在图片上会出现一个大图跟随鼠标移动)实现时mouseove和mouseout事件不断触发的问题 html <ul class="box"> <li class="item"><img class="imgitem" src="./images/img (1).jpg" alt=""></li> <li…

js当中mouseover和mouseout多次触发(非冒泡)

JS当中,mouseover和mouseout多次触发事件,不光是冒泡会产生,就是不冒泡,在一定条件下 ,也会产生多次触发事件: 例如下面的结构的情况下,我在class="ceng_up feature_tips"这个层上加这两个事件,就会多次触发mouseover和mouseout而不断的交替事件. <div id="tip_popu">  <div class="ceng_up feature_tips…

jQuery中mouseover和mouseout冒泡产生闪烁问题

问题:在jQuery中,对元素绑定mouseover和mouseout事件时,每次移入移出该元素和子元素时,都会触发事件,从而会出现闪动的现象. 原因:浏览器的冒泡行为. 解决方案: 使用mouseenter事件和mouseleave事件分别代替mouseover事件和mouseout事件. 例如有如下代码: <style> div{width: 50px;height: 50px;background:#ccc;} #test{background:red;width: 100px;heig…

jquery的鼠标移入移出事件hover、mouseenter、mouseleave、mouseover、mouseout

hover:鼠标进入元素的子元素时不会触发‘鼠标移开’的事件: mouseenter.mouseleave:效果与hover相同: mouseover: 鼠标进入元素和进入它的子元素时都会触发‘mouseover’的事件,即使添加了event.stopPropagation();return false; mouseout: 鼠标离开元素和离开它的子元素时都会触发‘mouseout’的事件,即使添加了event.stopPropagation();return false;…

jQuery-使用hover(fn,fn)函数监听mouseover和mouseout两个事件

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #target { border: 1px solid #eee; border-radius: 6px; padding: 10px; transition: all 1s linear; } #target.…

jQuery事件--mouseover()、mouseout()、mouseenter()和mouseleave()

mouseover([[data],fn]) 概述当鼠标指针位于元素上方时,会发生 mouseover 事件.该事件大多数时候会与 mouseout 事件一起使用注释:与 mouseenter 事件不同,不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件.只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件参数 fn 在每一个匹配元素的mouseover事件中绑定的处理函数 [data],fn data:mouseover([Data], fn)…

setTimeout用于取消多次执行mouseover或者mouseenter事件,间接实现hover的悬停加载的效果.

Mouseenter在鼠标滑上去不会对其子元素也发生监听, Mouseover在鼠标滑上去会对其子元素发生监听. 所以对于事件的监听,我们要看需求,这里是对父元素的监听,不需要对子元素做监听.就用mouseenter与mouseleave. mouseenter是不会对其里面的子元素做监听,所以我们对这个li做mouseenter和mouseleave的监听就是正确的. 带settimeout的mouseover事件 function add_color(b){ var x='#'+b; var…

mouseover和mouseout、mouseenter和mouseleave

又一个傻傻分不清楚的东东~ 现实真是一个问题天天有的世界~本以为我对js中的事件还是比较了解的,对于早就接触的mouse事件,更是觉得得心应手了~但是现实却给了我一记重拳! 我自身工作中遇到的犯二的故事就不说了...实在太...所以就进入主题! 简单的记录一下mouse事件中比较容易搞混的: mouseover和mouseout他们是一对,而mouseenter和mouseleave是另外一对! 对于大牛们来说,我这么分组应该一目了然了,然而对于新手可能可以往下看看. mouseover和mou…

jquery mouseout事件冒泡解决方法

在界面中最多使用的是div,如果一个div中包含多个div或img对象时, 针对mouseout鼠标移出事件时,并没有移出div层,但是当移动到div中的img时,也触发了该mouseout事件,这就是事件冒泡的描述. 解决方法: 可以使用jquery bind可以阻止浏览器的一些默认行为. 部分代码: $(".buy").mouseout(function(){ $(this).hide(); }); 改成: $(".buy").bind("mousel…

mouseover，mouseout，mouseenter，mouseleave的区别

相信做前端开发的都听说过“冒泡型事件”吧,<JavaScript高级程序设计>第九章有详细的讲述,但是,在学习的时候一知半解,也没详细去理解,导致最近在工作中碰到了问题:有许多 li 标签,标签上有2个按钮,当且仅当鼠标移入 li 时才会显示上面的2个按钮,如下图,左边是默认状态,右边是鼠标移入状态,开始使用的是 mouseover 和 mouseout ,结果鼠标移动到按钮上时,按钮会出现闪烁的情况. 后来对比了mouseover,mouseout,mouseenter,mouse…

Raphael的鼠标over move out事件

Raphael的鼠标over move out事件 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + re…

给视频加上遮盖层, 移入隐藏, 移开显示遮盖 ;;; mouseover ,和 mouseout

如下图所示: 主要就是给遮盖定位 . 但是有一个问题就是 video的高度不是固定的 . 如果 video 和遮盖在一个父级div里, 无法确定位置, 如果用js效果不是很好. 思路: video 和遮盖不在一个div里: html:  <div class="defaultVideo"> <video controls> <source src="../eypt_uploads/json01.…

mouseover mouseenter mouseout mouseleave

mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseout与mouseleave 不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件. 只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件.…

jq:mouseover和mouseout多次触发解决办法

区别: mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseout与mouseleave 不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件. 只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件. 在#a没有子元素的情况下,两者在效果上没有区别但是#a有子元素的情况下,为了mouseover,mouseout触发的…

jQuery的鼠标移入与移出事件

jq鼠标移入移除事件

mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件.只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseout与mouseleave不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件.只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件. $('.bottom1').mouseenter(function() { }) $('.bottom1').mouseleave(f…

jQuery里的mouseover与mouseenter事件类型区别

JQ里面有mouseover和mouseenter 2个事件类型干着差不多的活,用不好经常出现些小问题. 今天我解释一下原理: 事件类型翻译: mouseover 鼠标移上 mouseenter 鼠标移进 jQuery的 mouseover 绝对等于原生js的 onmouseover,但使用起来是往往会有些问题. 原生js没有 onmouseenter 的事件类型,jQuery内部给它封装了新的事件类型也就是 mouseenter 来解决这个问题. ( 对应还有鼠标离开 onmouseout…

【鼠标 mouseover和mouseout事件】的更多相关文章