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. python 学习笔记十九 django深入学习四 cookie,session

    缓存 一个动态网站的基本权衡点就是,它是动态的. 每次用户请求一个页面,Web服务器将进行所有涵盖数据库查询到模版渲染到业务逻辑的请求,用来创建浏览者需要的页面.当程序访问量大时,耗时必然会更加明显, ...

  2. $smarty获取变量get,post等用法

    {$smarty}保留变量不需要从PHP脚本中分配,是可以在模板中直接访问的数组类型变量,通常被用于访问一些特殊的模板变量.例如,直接在模板中访问页面请求变量.获取访问模板时的时间邮戳.直接访问PHP ...

  3. Centos7 关闭防火墙（Firewalld ），使用防火墙（iptables）

    1.直接关闭防火墙 systemctl stop firewalld.service: #停止firewall systemctl disable firewalld.service: #禁止fire ...

  4. Xcode 8

    (一)Xcode8去掉多余LOG 1.打开我们的项目,进入EditScheme 2.我们在Environment Variables中添加OS_ACTIVITY_MODE=disable

  5. word域2

    一.域应用基础 1.什么是域 简单地讲,域就是引导Word在文档中自动插入文字.图形.页码或其他信息的一组代码.每个域都有一个唯一的名字,它具有的功能与Excel中的函数非常相似.下面以Seq和Dat ...

  6. USB OTG插入检测识别

    转载请标注原文地址:http://blog.csdn.net/uranus_wm/article/details/9838847 一 USB引脚一般四根线,定义如下: 为支持OTG功能,mini/mi ...

  7. Boost学习笔记（一） 什么是Boost

    Boost库是一个功能强大.构造精巧,跨平台.开源并且完全免费的C++程序库

  8. [OC] 图片平铺

    Tip: self.bgImg.image = [self.bgImg.image resizableImageWithCapInsets:UIEdgeInsetsMake(100, 40, 40, ...

  9. nginx基本配置和参数说明

    #运行用户user nobody;#启动进程,通常设置成和cpu的数量相等worker_processes 1; #全局错误日志及PID文件#error_log logs/error.log;#err ...

  10. Servlet 工程 web.xml 中的 servlet 和 servlet-mapping 标签

    本文转载自 陈蒙的博客 最近在学习JavaEE轻量级框架,对于servlet-mapping中的url-partten标签以及网页访问时的执行顺序不是很清楚,搜索了很多遍终于找到了这篇博文(搜索也是个 ...