浅谈JQ中mouseover和mouseenter的区别

2024-03-19 08:30:09

mouseenter事件只会触发一次，触发对象是注册对象或者注册对象的子元素

mouseover事件可以触发多次，触发对象是注册对象或者注册对象的子元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>
  <p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>
  <div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
    <h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span></h2>
  </div>
  <div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
      <h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2>
  </div>
  <script>
    var x = 0,y = 0;
    var div1 = document.getElementsByClassName("over")[0];
    div1.addEventListener("mouseover",function(){
      var span = this.getElementsByTagName("span")[0]
      span.innerText = (x +=1);
      span.style.cssText = "border:2px red solid;";
    },false);

    var div2 = document.getElementsByClassName("enter")[0];
    div2.addEventListener("mouseenter",function(){
      var span = this.getElementsByTagName("span")[0]
      span.innerText = (y +=1);
      span.style.cssText = "border:2px red solid;";
    },false);
  </script>
</body>
</html>

以上这篇浅谈JQ中mouseover和mouseenter的区别就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

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

写了这么久 js应用我居然不知道这两个事件于是去google搜索了一番. 才发现这两个事件是如此的优秀且好用... 但搜索过程中发现好多人似乎不太明白这两个事件和mouseover mouseout 真正的区别和用途.. 并且看到google中搜索得到的一些朋友实现的跨浏览器解决方案. 觉得似乎有些繁琐...所以产生了写一篇blog 把这玩意说透彻的冲动... 好啦.我们进入正题. 对于 mouseover 和mouseenter 两个事件最大的区别就是 mou
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)

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

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

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

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

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

1.java.util.Collection 是一个集合接口.它提供了对集合对象进行基本操作的通用接口方法.Collection接口在Java 类库中有很多具体的实现.Collection接口的意义是为各种具体的集合提供了最大化的统一操作方式. Collection ├List │├LinkedList │├ArrayList │└Vector │ └Stack └Set 2.java.util.Collections 是一个包装类.它包含有各种有关集合操作的静态多态方法.此类不能实例化,就像一
浅谈php中urlencode与rawurlencode的区别

前段时间说自己遇到了个<URL加号引发错误>的BUG,引起这个bug的原因就是自己在URL中使用了 urlencode 函数,该函数会把空格转换成加号,这样就导致URL解析出错,而空格只有转换成 %20 才可以可以正常解析,这时我们就需要使用 rawurlencode 函数. 下面就介绍一下 urlencode 函数与 rawurlencode 函数的区别: urlencode 函数: 返回字符串,此字符串中除了 -_. 之外的所有非字母数字字符都将被替换成百分号(%)后跟两位十六进制数,空格
浅谈JS中String()与 .toString()的区别

我们知道String()与 .toString()都是可以转换为字符串类型,但是String()与 .toString()的还是有区别的 1..toString()可以将所有的的数据都转换为字符串,但是要排除null 和 undefined 例如将false转为字符串类型 <script> var str = false.toString(); console.log(str, typeof str); </script> 返回的结果为 false,string 看看null 和
浅谈jquery中next与siblings的区别

siblings([expr]): 概述取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合. [expr] :可以用可选的表达式进行筛选.用于筛选同辈元素的表达式示例找到每个div的所有同辈元素. HTML 代码: <p>Hello</p><div><span>Hello Again</span></div><p>And Again</p> jQuery 代码: $("div
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别

hide和fadeOut 显示效果有什么区别? show和fadeIn显示效果都一样? 很多朋友在学习jQuery的时候会遇到这个问题 ,hide和 fadeOut都可以带有参数: $(selector).hide(speed,callback); $(selector).fadeOut(speed,callback); 首先我们从名字上就可以看出 hide是隐藏而fadeOut是淡出,当然名字不能看出具体的区别,只能体现他们是不同的而已.但是当我们把参数 speed 设置稍微长一些就可以看出
浅谈java中String StringBuffer StringBuilder的区别

* String类是不可变类,只要对String进行修改,都会导致新的对象生成. * StringBuffer和StringBuilder都是可变类,任何对字符串的改变都不会产生新的对象. 在实际使用时,如果经常需要对一个字符串进行修改,例如插入.删除等 * 但StringBuffer和StringBuilder有什么区别呢? StringBuffer是线程安全的,在多线程程序中是很方便使用的,但是程序的效率就会慢一点. StringBuilder不是线程安全的,在单线程中,比StringBuf
浅谈ThinkPHP中initialize和construct的区别

ThinkPHP中initialize()和construct()这两个函数都可以理解为构造函数,前面一个是tp框架独有的,后面的是php构造函数,那么这两个有什么不同呢? 在网上搜索,很多答案是两者是一样的,ThinkPHP中initialize相当于php的construct,这么说是错误的,如果这样,tp为什么不用construct,而要自己弄一个ThinkPHP版的initialize构造函数呢? 自己试一下就知道两者的不同了. a.php class a{ function __con
浅谈java中字节与字符的区别

最近在看Java中的IO相关知识,发现对字节和字符的理解还不够.写篇总结记录一下. 一.字节所谓字节(Byte),是计算机数据存储的一种计量单位.一个二进制位称为比特(bit),8个比特组成一个字节,也就是说一个字节可以用于区分256个整数(0~255).由此我们可以知道,字节本是面向计算机数据存储及传输的基本单位,后续的字符也就是以字节为单位存储的,不同编码的字符占用的字节数不同. 那么在Java中,除了存储的意义外,Java还将字节Byte作为一种基本数据类型,该数据类型在内存中占用一个字
浅谈C++中const与constexpr的区别

目录一.const常量与#define比较二.const修饰 1.修饰普通变量,必须初始化 2.修饰类变量和成员变量 3.修饰成员函数 4.修饰指针 5.修饰引用三.const转换四.顶层const与底层const 五.C++11新引入的constexpr 一.const常量与#define比较 define只是简单的替换,没有类型,const可以做到防窜改与类型安全. 而且#define会在内存中可能(有几次替换就有几次拷贝)有多份拷贝,对于字面值常量加不加const都一样,例如:co

浅谈JQ中mouseover和mouseenter的区别

相关推荐

随机推荐