关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别

最近在做的在线考试和课程商城都遇到这样的问题：就是鼠标滑过的时候出现一个层，当鼠标滑到当前层的话mouseover和mouseout在低版本的浏览器会出现闪动的现象，解决这个现象的办法有许多，不过我觉得有一种是最简单的那就是把mouseover和mouseout换成对应的mouseenter和mouseleave。

当鼠标指针位于元素上方时，会发生 mouseover 事件。

该事件大多数时候会与 mouseout 事件一起使用。

注释：与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

注释：与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。请看下面例子的演示。

当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。

注意：mouseover ,mouseout当鼠标指针穿过被选元素子元素时，也会触发事件。这在绑定事件时，有时出现意想不到的Bug可能就是由 mouseover mouseout 事件引起的

mouseover与mouseenter

不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。

只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

mouseout与mouseleave

不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。

只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

赞 (0)

相关推荐

  • 快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)

    快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)

    记录两个项目开发中遇到的问题,一个是ECharts外部调用保存为图片操作,一个是workflow工作流连接曲线onmouseenter和onmouseleave事件由于鼠标移动过快触发问题. 一.外部按钮调用ECharts图表的保存为图片操作 最近使用ECharts库绘制图表,依据需求希望可以把图表设置的保存为图片操作可以在图表外部调用,主要是希望可以和项目之前的下载图片操作界面保持一致.然后上网找了一些方法,看了看也没遇到一个可以满意的.后来,突然想到了echart开放了源码,可以看看源码,找

  • 跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明

    写了这么久 js应用 我居然不知道这两个事件 于是 去google搜索了一番. 才发现这两个事件 是如此的优秀 且好用... 但搜索过程中 发现 好多人 似乎不太明白这两个事件 和mouseover mouseout 真正的区别 和用途..  并且看到google中搜索得到的 一些朋友 实现的 跨浏览器 解决方案. 觉得似乎有些繁琐...所以产生了写一篇blog 把这玩意 说透彻的冲动... 好啦.我们进入正题. 对于 mouseover 和mouseenter 两个事件 最大的区别就是 mou

  • 为非IE浏览器添加mouseenter,mouseleave事件的实现代码

    先了解几个事件对象属性 target 指事件源对象,点击嵌套元素最里层的某元素,该元素就是target.IE6/7/8对应的是srcElement. currentTarget 指添加事件handler的元素本身,如el.addEventListener中el就是currentTarget.IE6/7/8没有对应属性,可在handler内使用this来替代如evt.currentTarget = this. relativeTarget 指事件相关的元素,一般用在mouseover,mouseo

  • javascript中mouseenter与mouseover的异同

    javascript中mouseenter与mouseover的异同

    不知道大家在面试或者工作过程中有没有被 mouseover 和 mouseenter (对应的是 mouseout 和 mouseleave )事件所困扰.自己之前在面试的时候就有被问到诸如mouseover和mouseenter事件的异同之类的问题?当时没有答出来,一直也对这两个事件有点模糊不清,趁着最近正在读 zepto源码 ,准备写一篇这方面的文章,如果有错误,请大家指正. mouseenter与mouseover的异同? 要说清楚mouseenter与mouseover有什么不同,也许可

  • javascript 兼容FF的onmouseenter和onmouseleave的代码

    javascript 兼容FF的onmouseenter和onmouseleave的代码

    IE下有 onmouseenter和onmouseleave来解决. 可惜ff就没有.  我再想 , 为什么这么好的功能,为什么ff不引用呢? 还有ie中的onpropertychange  ,哎,ff中都没有... 对比例子中引入了一段js ,来兼容FF的onmouseenter和onmouseleave. : 复制代码 代码如下: var xb = {     evtHash: [], ieGetUniqueID: function(_elem)     {         if (_ele

  • Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击

    实例如下所示: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击</title>    <script src="JS/jquery-1.9.1.js" type="text/javascript"></

  • 浅谈JQ中mouseover和mouseenter的区别

    mouseenter事件只会触发一次,触发对象是注册对象或者注册对象的子元素 mouseover事件可以触发多次,触发对象是注册对象或者注册对象的子元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p>

  • 关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别

    最近在做的在线考试和课程商城都遇到这样的问题:就是鼠标滑过的时候出现一个层,当鼠标滑到当前层的话mouseover和mouseout在低版本的浏览器会出现闪动的现象,解决这个现象的办法有许多,不过我觉得有一种是最简单的那就是把mouseover和mouseout换成对应的mouseenter和mouseleave. 当鼠标指针位于元素上方时,会发生 mouseover 事件. 该事件大多数时候会与 mouseout 事件一起使用. 注释:与 mouseenter 事件不同,不论鼠标指针穿过被选元

  • jQuery常用事件方法mouseenter+mouseleave+hover

    jQuery常用事件方法mouseenter+mouseleave+hover

    jQuery常用事件方法: jQuery事件方法与原生Js事件方法名称类似,不需要写on,通过jQuery对象打点调用,括号内参数是事件函数 mouseenter()方法:鼠标进入一个元素触发的事件 mouseleave()方法:鼠标离开一个元素触发的事件 注意:mouseenter和mouseleave没有事件冒泡,在使用时替换mouseover和mouseout更加合适 下面是代码对比: <div class="parent">    <div class=&qu

  • node.js事件循环机制及与js区别详解

    目录 一.是什么 二.流程 三.题目 一.是什么 在浏览器事件循环(opens new window)中,我们了解到javascript在浏览器中的事件循环机制,其是根据HTML5定义的规范来实现 而在NodeJS中,事件循环是基于libuv实现,libuv是一个多平台的专注于异步IO的库,如下图最右侧所示: 上图EVENT_QUEUE 给人看起来只有一个队列,但EventLoop存在6个阶段,每个阶段都有对应的一个先进先出的回调队列 二.流程 上节讲到事件循环分成了六个阶段,对应如下: tim

  • JQuery中阻止事件冒泡几种方式及其区别介绍

    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); 复制代码 代码如下: $("#div1").mousedown(function(event){ event.stopPropagation(); }); 方式二:return false; 复制代码 代码如下: $("#div1").mousedown(function(event){ return false; }); 但是这两种方式是有区别的.return

  • 解析jQuery的三种bind/One/Live事件绑定使用方法

    jQuery是 一款优秀的JavaScript框架,在旧版里主要用bind()方法,在新版里又多了两种One(),Live(),下面介绍这几种方法的使用: 1. bind/Unbind在jquery的事件模型中,有两个基本的事件绑 定函数,bind与unbind,这两个函数的含义就是匹配页面元素进行相关事件的处理.比如我们在JS中经常使用到的 onfocus,onblur,onmouseover,onmousedown等事件都可以作为bind的参数进行传递. $("#id").bind

  • 锋利的jQuery 要点归纳（三） jQuery中的事件和动画（上：事件篇）

    一.事件 1 加载DOM 复制代码 代码如下: $(document).ready(function(){//...}) DOM加载完毕后执行,在可重复使用上区别于window.onload=function(){//...} $(window).load(function(){//...}) window内所有对象加载完毕后执行,几等同window.onload=function(){//...}.也可针对selector使用此方法 另:$(document).ready(function()

  • jQuery的三种bind/One/Live/On事件绑定使用方法

    本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧.需要的朋友参考下 今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定.因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法. on(eve

随机推荐