脑子不好用了，一点东西要看几遍才能记住，学过的东西也要好几遍，悲哀。

习惯了jquery的hover，或者看过hover源码，或者是正美的《框架设计》，onmouseover和onmouseout的bug问题，不过对于我等脑子不好用的，还是几个无bug的问题吧，看代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <style>
  6. #div1{
  7.   width: 200px;
  8.   height: 200px;
  9.   background: #ccc;
  10.   overflow: hidden;
  11.  
  12. }
  13. h2{
  14.   width: %;
  15.   height: 30px;
  16.   background: red;
  17. }
  18. </style>
  19. <script type="text/javascript">
  20. window.onload=function(){
  21.   var oDiv = document.getElementById('div1');
  22.  
  23. /*  oDiv.onmouseover=function(ev){
  24.  
  25.     var oEvent = ev || event;
  26.     var oFrom = oEvent.fromElement || oEvent.relatedTarget;
  27.  
  28.     if(oDiv.contains(oFrom)){
  29.      return ;
  30.     }
  31.  
  32.     alert('移入')
  33.  
  34.   }*/
  35.   /*oDiv.onmouseenter=function(){
  36.     alert('移入')
  37.   }*/
  38.  
  39.   oDiv.onmouseout=function(ev){
  40.     var oEvent = ev || event;
  41.     var oTo = oEvent.toElement || oEvent.relatedTarget;
  42.     if(oDiv.contains(oTo)){
  43.       return false;
  44.     }
  45.  
  46.     alert('移出')
  47.   }
  48.   /*oDiv.onmouseleave=function(){
  49.     alert('移出')
  50.   }*/
  51. }
  52. </script>
  53. </head>
  54. <body>
  55. <div id="div1">
  56. <h2>我是h2</h2>
  57. </div>
  58. </body>
  59. </html>

通过判断事件对象中fromElement|| relatedTarget,判断鼠标来源方向deng

onmouseover和onmouseout的bug的更多相关文章

  1. 关于onmouseover和onmouseout的bug

    总结了一下关于使用onmouseover以及onmouseout会出现的bug 首先简单的布局: <div id="box"> <div>这是一个内容< ...

  2. onmouseover和onmouseout的那些事

    这篇文章来自一个偶然...以前刚开始学习javascript事件的时候就被一个东西搞得晕头撞向的.就是一对名字很相近的事件.一组是onmouseover()和onmouseout().另一组就是onm ...

  3. JQuery 之事件中的 ----- hover 与 onmouseover 、onmouseout 联系

    hover([over,]out) 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法.这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态. 当鼠标移动到一个匹配的元素 ...

  4. onmouseover和onmouseout的烦恼

    一个DIV层,当鼠标移进的时候会触发onmouseover,移出的时候会触发onmouseout.   非常easy的逻辑,这也是我们想要的!但随之烦恼也就来了:onmouseover并不会仅仅在移进 ...

  5. 使用HTML DOM 来分配事件 —— onmouseover和onmouseout ，onmousedown和onmouseup

    一, onmouseover 和 onmouseout 事件 onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数. 一个小例:鼠标未在 ...

  6. JS:onmouseover 、onmouseout

    鼠标移动到P标签上时,改变文本和边框样式 <style type="text/css"> .onmouseover { color: red; border: 1px ...

  7. 【try..catch..】【判断输入是否为空】【onchange事件】【onmouseover和onmouseout事件】【onmousedown和onmouseup事件】

    1.try..catch.. <body><script>function myFunction(){try{ var x=document.getElementById(&q ...

  8. Repeater控件添加onmouseover和onmouseout事件

    网友有问题,在Repeater控件中,需要添加onmouseover和onmouseout事件功能.Insus.NET有叫他参考<onmouseover和onmouseout在Repeater控 ...

  9. HTML事件(onclick、onmouseover、onmouseout、this)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 三星核S5PV210AH-A0 SAMSUNG

    三星S5PV210AH-A0 S5PV210又名“蜂鸟”(Hummingbird),是三星推出的一款适用于智能手机和平板电脑等多媒体设备的应用处理器,S5PV210和S5PC110功能一样,110小封 ...

  2. Python3基础 str format 四舍六入五凑偶 保留一位小数

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  3. Docker 下安装 Spark

    1. 安装Docker, 见上篇. 2. 安装ubuntu:    docker run --name dcSpark ubuntu 3. 运行 Bash:     docker exec -ti d ...

  4. B-树 B+树 B*树

    区分B树,B-树 有的文章说二叉查找树(Binary Search Tree,BST)就是B树,这个我总结来说是不对的 B树和B-树是同一种树,只不过英语中B-tree被中国人翻译成了B-树,让人以为 ...

  5. ZooKeeper与Kafka相关

    Kafka集群搭建: https://www.cnblogs.com/likehua/p/3999538.html https://www.cnblogs.com/mikeguan/p/7079013 ...

  6. github上的markdown如何换行

    https://gist.github.com/shaunlebron/746476e6e7a4d698b373 1.普通的换行 在文本结束后面,加2个空格 2.段落之间的换行 使用反斜杠\

  7. 【第三十五章】 metrics（3）- codahale-metrics基本使用

    <!-- metrics --> <dependency> <groupId>io.dropwizard.metrics</groupId> <a ...

  8. 论文笔记——Channel Pruning for Accelerating Very Deep Neural Networks

    论文地址:https://arxiv.org/abs/1707.06168 代码地址:https://github.com/yihui-he/channel-pruning 采用方法 这篇文章主要讲诉 ...

  9. Wireshark无法解析OpenFlow配置协议 解决方法

    在使用wireshark对OpenFlow交换机与FlowVisor的通信过程进行抓包分析的时候,在其选项中有openflow_v1选项,但Wireshark竟无法解析OpenFlow协议. 在查阅相 ...

  10. C++小结：迟到的小结和重新起航的故事

    迟到的小结和重新起航的故事 有关这个学期的故事,随着这个学期的结束也划上了一个句号. 正如之前博客里面(还是空间里面)提到的,在这个过程中的收获比最后考试的结果更重要. 就像这次的计算器,也许会对最后 ...