l论事件onmouseover 和 onmouseenter;同类比较onmouseout 和 onmouseleave;

使用onmouseover时,鼠标除了被设置事件的元素,还会触发其子元素; 而onmouseenter只会触发被设置了事件的元素,子元素不受影响。

支持度:mouseenter,mouseleavei  IE8+的浏览器支持,safari 5不支持

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mouseover 和 mouseenter的区别</title>
<style>
body{
padding: 0;
margin: 0; }
#box1,
#box2{
width: 300px;
height: 100px;
margin-top: 100px;
padding-top: 50px;
background: #f00; }
#box1 p,
#box2 p{
width: 70%;
height: 50px;
line-height: 50px;
text-align: center;
background: #ccc; }
</style>
<script>
window.onload = function(){
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var num1 = document.getElementById("num1");
var num2 = document.getElementById("num2");
box1.onmouseover = function(){
num1.innerHTML++;
}
box2.onmouseenter = function(){
num2.innerHTML++;
}
}
</script>
</head>
<body>
<div id="box1">
<p>事件mouseover: <span id="num1">1</span></p>
</div>
<div id="box2">
<p>事件mouseenter: <span id="num2">1</span></p>
</div> </body>
</html>

The different of mouseover and mouseenter的更多相关文章

  1. jquery的hover mouseover mouseout mouseenter mouseleave的区别

    jquery的hover mouseover mouseout mouseenter mouseleave的区别 1.mouseover mouseout mouseover - 鼠标指针经过任何子元 ...

  2. mouseover和mouseenter的区别

    mouseover和mouseenter都是鼠标事件. mouseover事件,当鼠标穿过被选元素的时候,若此元素有子元素,子元素也会被触发此事件.即是使用mouseover事件,会多次触发此元素. ...

  3. mouseover,mouseout,mouseenter,mouseleave的区别

    1.前言 今天下午参加一个面试,对方问我写不写博客,这时候才猛然意识到好久没写东西了.最近一直在外边实习,每天有很多经历和挑战,但是却没有及时地记录下来,这一点必须得批评自己,以后得经常把自己遇到的问 ...

  4. jQuery mouseover与mouseenter,mouseout与mouseleave的区别

    mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...

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

    轮播中大多会选择mouseover和mouseout  这个时候是没有任何问题的 但当遇到有css3动画的时候,会发现移入移出过快 动画还没加载完成就需要执行下一个动画,完了动画样式就错乱了. 这时候 ...

  6. 区别mouseover与mouseenter?

    区别mouseover与mouseenter? * mouseover: 在移入子元素时也会触发, 对应mouseout,进入子元素的时候,父元素显示离开状态 * mouseenter: 只在移入当前 ...

  7. mouseover与mouseenter,mouseout与mouseleave的区别

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

  8. 你可能不知道的mouseover/mouseout mouseenter/mouseleave

    mouseover与mouseenter 1. 触发时机 mouseover在被监听的节点与子节点上都会触发 mouseenter只在被监听的节点上触发 本质上是因为mouseenter不能冒泡 2. ...

  9. 曾经跳过的坑----jQuery mouseover与mouseenter,mouseout与mouseleave的区别

    mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...

随机推荐

  1. 【堆】【kd-tree】bzoj2626 JZPFAR

    用堆记录答案.看看当前点是否比堆顶更优. #include<cstdio> #include<queue> #include<cstring> #include&l ...

  2. poj 3252 组合数

        主要考察组合数知识,初始化的时候参考公式 首先先推个公式,就是长度为len的Round Numbers的个数.      长度为len,第一位肯定是1了.      那么后面剩下 len-1位 ...

  3. Cheatsheet: 2014 08.01 ~ 08.31

    Web Slow Server? This is the Flow Chart You're Looking For A Strolll Through Node: Introduction .NET ...

  4. C# Base64字符串转换成图片及图片转换为Base64

    最近有朋友经常会问我一些问题,例如,如何把一个字符串转换成base64字符串,如何把一个二进制文件转换成Base64文件,以及如何转换回原有的文件,在此我把方法写一下   字符串与Base64相互转换 ...

  5. Win7关机出现关闭程序提示框

    运行输入Gpedit.msc回车打开组策略,在左侧选计算机配置/管理模板/系统/关机选项,在右侧双击“关闭会阻止或取消关机的应用程序的自动终止功能”,在打开的提示框中选“已启用”,按确定即可.

  6. Stm32高级定时器(四)

    Stm32高级定时器(四) 1 编码器接口模式 1.1 编码器原理 什么是正交?如果两个信号相位相差90度,则这两个信号称为正交.由于两个信号相差90度,因此可以根据两个信号哪个先哪个后来判断方向.根 ...

  7. django框架(View)

    -------------------URLconf-------------------1.设置 1.在settings.py文件中通过ROOT_URLCONF指定根级url的配置 2.urlpat ...

  8. navicat 几个 可用的东西

    1.常用的 表格 一启动 就进入的某某连接某某数据库某某表 2. 结构 比对(菜单栏 “工具里面”) 3.数据对比 同上 4.保持连接 5.全局查询 在工具中查找 ------在数据库或模式中查找

  9. docker上安装elasticsearch和ik分词器插件和header,实现分词功能

    docker run -di --name=tensquare_es -p 9200: -p 9300:9300 elasticsearch:5.6.8 创建elasticsearch容器(如果版本不 ...

  10. HDU - 1160 (FatMouse&#39;s Speed )最长上升子序列

    题意:一个元素有两个属性 w 和 sp 求在w严格递增的情况下 sp严格递减 用结构体 定义三个参数  w  sp  ix , ix是在输入时的顺序  因为我们要排序 之后把结构体数组 按从小到大排序 ...