javaScript事件onmouseout 、 onmouseove

javaScript事件onmouseout 、 onmouseove

onmouseout： 鼠标从某元素移开

onmouseover： 鼠标被移到某元素之上

这两个事件是鼠标滑过元素是的效果，可以触发事件。实现标题栏的下拉及隐藏标题栏的下拉及隐藏常用。

最近做一个简单的网站，涉及到导航栏的下拉及隐藏，导航菜单是多级的，鼠标放到导航上下拉出一级菜单，鼠标放到下拉菜单上右联出二级菜单，移走后收起来。

于是想到javaScript的各种事件，发现onmouseout 、 onmouseove符合想法。

实现时蛋疼的情况出现了，下面上代码。

<div class="logodiv" id="dw1" onmouseout="divout()">
  <ul class="ul1">
    <c:forEach items="${arrs }" var="arrs1" varStatus="vs">
      <li onmouseover="liin1(this.id)" id="li${ vs.index+1}">
        <a href="">${arrs[vs.index] }</a>
      	<ul class="ul11" id="ul1${ vs.index+1}">
      	  <c:forEach items="${varLista[vs.index]}" var="vars" varStatus="livs" step="3">
      	    <li>
      		<a onclick="change1('${vars.DWNAME }','${vars.DEPTNAME }');">${vars.DEPTNAME }</a>
      		<a onclick="change1('${vars.DWNAME }','${varLista[vs.index][livs.index+1].DEPTNAME }');">${varLista[vs.index][livs.index+1].DEPTNAME }</a>
      		<a onclick="change1('${vars.DWNAME }','${varLista[vs.index][livs.index+2].DEPTNAME }');">${varLista[vs.index][livs.index+2].DEPTNAME }</a></li>
      	  </c:forEach>
        </ul>
      </li>
    </c:forEach>
  </ul>
</div>

上面代码中dw1是导航栏onmouseove事件过后显示出来的div，绑定onmouseout事件想实现的是鼠标离开后隐藏dw1。同理想的是鼠标滑过里面的li显示下级菜单，

这时候蛋疼的事情来了，鼠标一放到li上dw1的onmouseout事件触发了，dw1没有了，哎我去这啥情况啊！！！！！

实验了半天，觉得是鼠标放到li上时虽然是在dw1里面，但是实际上是聚焦到li上面了，就像是餐桌上的盘子，虽然但是。

又折腾了半天发现了一个好东西bind("mouseleave",function(){})、bind("mouseenter",function(){})，他们的作用是判断鼠标动作时移入、移出的是否是当前元素的内部元素，

注意啊是内部元素不是子元素，这可起飞了！！！！

bind("mouseleave",function(){})、bind("mouseenter",function(){})

于是一番操作下来有了下面的代码。ps:上边dw1上的onmouseout事件监听可以去掉了。

$(document).ready(function(){
  console.log("hhhhhhhhhhhhh");
  $("#dw1").bind("mouseleave",function(){
    //alert("saaaaaaaaa");
    console.log("out");
    $("#dw1").hide();
  });
  $("#dw1").bind("mouseenter",function(){
    //alert("saaaaaaaaa");
      console.log("over");
    //$("#dw1").hide();
    //$("#dw1").show();
  });
});

同时还发现了其他的方法，但是主要是针对IE浏览器，加监控后也不支持火狐，所以没有测试，这里记录一下。

contains

在onmouseover时先进行如下判断，结果为true时再执行方法体：

当触发onmouseover事件时，判断鼠标离开的元素是否是当前元素的内部元素，如果是，忽略此事件；
$("#popFormDiv").mouseover(function () {
  var s = event.fromElement || event.relatedTarget;
  if (!this.contains(s)) { $(this).show("slow"); }
});

在onmouseout时先进行如下判断，结果为true时再执行方法体：

当触发onmouseout事件时，判断鼠标进入的元素是否是当前元素的内部元素，如果是，忽略此事件；
$("#popFormDiv").mouseout(function () {
  var s = event.toElement || event.relatedTarget;
  if (!this.contains(s)) { $(this).hide("slow"); }
});

js添加如下的代码来为非IE浏览器增加contains支持：

if (typeof (HTMLElement) != "undefined") {
  HTMLElement.prototype.contains = function (obj) {
    while (obj != null && typeof (obj.tagName) != "undefined") {
        if (obj == this)
            return true;
        obj = obj.parentNode;
    }
  return false;
  };
}