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. 复旦大学2015--2016学年第一学期（15级）高等代数I期末考试第八大题解答

    八.(本题10分)  设 $V$ 为数域 $K$ 上的 $n$ 维线性空间, $\varphi$ 为 $V$ 上的线性变换. 子空间 $C(\varphi,\alpha)=L(\alpha,\varp ...

  2. MySQL INSERT插入条件判断：如果不存在则插入

    摘要: 我们经常需要进行sql的批量插入,要求:该条记录不存在则插入,存在则不插入.如果使用一条INSERT语句实现呢? 普通的 INSERT INTO 插入: INSERT INTO card(ca ...

  3. Zabbix3.x安装图解教程

    准备知识: Zabbix3.x比较之前的2.0界面有了很大的变化,但是安装部署过程与2.x基本完全一样. 1.Zabbix2.x安装图解教程 http://www.osyunwei.com/archi ...

  4. js 不同进制之间相互转换

    如果a进制与b进制都不等于10,则十进制作为桥梁进行转换 例如 10进制的数字11 转换为3进制为102 10进制的数字11 转换为4进制为23 现在进行3进制转4进制 1.3进制转10进制 2.10 ...

  5. 使用xfire工具搭建webservice

    一个简单的项目,下载下来导入可以直接使用 https://yunpan.cn/cY8ANUAYLgy7s  访问密码 99e3

  6. centos7 加入自启动服务的方法 以jexus为例

    在/lib/systemd/system 下创建文件jexus.service vi jexus.service 内容如下 Unit Description=jexus After=network.t ...

  7. kali4.0 更新源出错

    一.前情提要: OS:kail 4.0 64bit 二.出错描述如下: 无法从服务器下载对应版本的软件,我查看了服务器上的版本与我要下载的不一致,因此肯定无法找到对应的软件版本 三.对策: 换源:vi ...

  8. 浅谈一下关于使用css3来制作圆环进度条

    最近PC端项目要做一个这样的页面出来,其他的都很简单,关键在于百分比的圆环效果.我最初打算是直接使用canvas来实现的,因为canvas实现一个圆是很简便的. 下面贴出canvas实现圆环的代码,有 ...

  9. 读文章《Flexbox详解》笔记

    文章地址:Flexbox详解 属性摘抄: flex container : display: other values | flex | inline-flex; flex-direction: ro ...

  10. 小谈一下JavaScript中的JSON

    一.JSON的语法可以表示以下三种类型的值: 1.简单值:字符串,数值,布尔值,null 比如:5,"你好",false,null JSON中字符串必须用双引号,而JS中则没有强制 ...