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

习惯了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. Android widget

    1,TextView :走马灯效果 2,EditText ,AutoCompleteText MutiAutoCompleteTextView 3,Button,ImageButton,RadioBu ...

  2. Android 开发环境配置图文教程(jdk+eclipse+android sdk)

    一 相关下载(1) java JDK下载:进入该网页: http://java.sun.com/javase/downloads/index.jsp (或者直接点击下载)如下图: 选择 Downloa ...

  3. luogu3261 懒惰左偏树 [JLOI2015]城池攻占

    目录 题目 思路 错误&&反思 代码 题目 luogu 原来左偏树真的能懒惰下放 那这篇博客应该要咕咕了 一开始我按照那篇博客想了一下,感觉emm,还是瞄了一眼看到了pushdown ...

  4. POJ 3630 Phone List（字符串前缀重复）题解

    Description Given a list of phone numbers, determine if it is consistent in the sense that no number ...

  5. springboot整合mybatis将sql打印到日志(转)

    在前台请求数据的时候,sql语句一直都是打印到控制台的,有一个想法就是想让它打印到日志里,该如何做呢? 见下面的mybatis配置文件: <?xml version="1.0" ...

  6. C# Int转Enum

    Int-->Enum (1)可以强制转换将整型转换成枚举类型. 例如:Colors color = (Colors)2 ,那么color即为Colors.Blue (2)利用Enum的静态方法T ...

  7. go 变量声明

    第一种,指定变量类型,声明后若不赋值,使用默认值. var v_name v_type v_name = value 第二种,根据值自行判定变量类型. var v_name = value 第三种,省 ...

  8. 《剑指offer》第二十一题（调整数组顺序使奇数位于偶数前面）

    // 面试题21:调整数组顺序使奇数位于偶数前面 // 题目:输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有 // 奇数位于数组的前半部分,所有偶数位于数组的后半部分. #inclu ...

  9. js audio 播放音乐

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. Codeforces 859C - Pie Rules

    859C - Pie Rules 思路: dp 我们知道无论谁拿到decider token他拿不拿蛋糕都是确定的,都是使自己最优的结果. 于是 定义状态:dp[i]表示到第i个位置拿到decider ...