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

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

#div1{

  width: 200px;

  height: 200px;

  background: #ccc;

  overflow: hidden;

}

h2{

  width: %;

  height: 30px;

  background: red;

}

</style>

<script type="text/javascript">

window.onload=function(){

  var oDiv = document.getElementById('div1');

/*  oDiv.onmouseover=function(ev){

    var oEvent = ev || event;

    var oFrom = oEvent.fromElement || oEvent.relatedTarget;

    if(oDiv.contains(oFrom)){

     return ;

    }

    alert('移入')

  }*/

  /*oDiv.onmouseenter=function(){

    alert('移入')

  }*/

  oDiv.onmouseout=function(ev){

    var oEvent = ev || event;

    var oTo = oEvent.toElement || oEvent.relatedTarget;

    if(oDiv.contains(oTo)){

      return false;

    }

    alert('移出')

  }

  /*oDiv.onmouseleave=function(){

    alert('移出')

  }*/

}

</script>

</head>

<body>

<div id="div1">

<h2>我是h2</h2>

</div>

</body>

</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. STM32.BOOT

    BOOT0 和 BOOT1STM32 三种启动模式对应的存储介质均是芯片内置的,它们是:1)用户闪存 = 芯片内置的?Flash.2)SRAM = 芯片内置的 RAM 区,就是内存啦.3)系统存储器 ...

  2. 移动页面click延迟引发的touch问题

    一.事件捕获与冒泡 先扯一下事件的触发流程,这个之后会用到. DOM2级事件规定事件包括三个阶段: ① 事件捕获阶段 ② 处于目标阶段 ③ 事件冒泡阶段 大概的流程就是事件从最外层一层一层往里面传递( ...

  3. Python3基础 tuple 通过拆分元组向元组中加入新的元素

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

  4. [Shiro] - Shiro之SpringBoot中的使用

    下载了运行项目后,访问路径:http://localhost/shiro/login 这篇应该在进阶后面的. shiro中的重中之重,一定要看. 基于springboot+thymeleaf+shir ...

  5. 【jdk源码分析】jdk8的ArrayList初始化长度为0

    先看结果 用的是反射获取elementData底层数组的长度 查看源码 无参构造函数没有了this.size = 10; 图1 图2 图3 图4 java的基本数据类型默认值 所以无参构造时长度为0 ...

  6. Ubuntu 14.04 安装adobe flash player

    参考: How to install flash payer in Ubuntu 14.04 LTS? [duplicate] Ubuntu 14.04 安装adobe flash player 32 ...

  7. 【TCP/IP详解 卷一：协议】第9章 IP选路

    推荐链接:网络地址与主机地址 9.1 引言 路由选择程序(daemon),通常这是一个用户进程.在大多数的Unix系统中,大多数的路由选择程序都是路由程序和网关程序. 路由表经常被IP访问,但是它被路 ...

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

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

  9. Mui --- 弹出菜单

    mui框架内置了弹出菜单插件,弹出菜单显示内容不限,但必须包裹在一个含.mui-popover类的div中,如下即为一个弹出菜单内容: <div id="popover" c ...

  10. JS身份证验证

    window.checkIdcard = function (idcard) { var errors = new Array( "yes", "请检查输入的证件号码是否 ...