解决因mouseover,mouseout冒泡产生的闪烁问题+兼容性问题

转自：http://blog.sina.com.cn/s/blog_6261f86901011mub.html

啥是冒泡：

JavaSciprt事件中有两个很重要的特性：事件冒泡以及目标元素。

当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。

任何一个事件的目标元素都是最开始的那个元素，在我们的这个例子中也就是按钮，并且它在我们的元素对象中以属性的形式出现。使用事件代理的话我们可以把事件处理器添加到一个元素上，等待一个事件从它的子级元素里冒泡上来，并且可以很方便地得知这个事件是从哪个元素开始的。

由于浏览器的冒泡行为。造成如果在一个DIV元素上同时定义了mouseover,mouseout的时候，当鼠标移动到DIV中的child子元素的时候，就会同时执行了两个操作mouseover和mouseout。

这个网页可以让你更好的理解冒泡：http://varnow.org/pages/mouseover-mouseout-problem.html

这个是解决冒泡后的显示情况（采用onmouseenter等事件）：http://varnow.org/pages/mouseover-mouseout-solution-two.html

事件的冒泡有什么好处：

想象一下现在我们有一个10列、100行的HTML表格，你希望在用户点击表格中的某一单元格的时候做点什么。比如说我有一次就需要让表格中的每一 个单元格在被点击的时候变成可编辑状态。如果把事件处理器加到这1000个单元格会产生一个很大的性能问题，并且有可能导致内存泄露甚至是浏览器的崩溃。 相反地，使用事件代理的话，你只需要把一个事件处理器添加到table元素上就可以了，这个函数可以把点击事件给截下来，并且判断出是哪个单元格被点击 了。

function showMemberInfoCard(memberId, id) { if($("#card").hasClass("true")) { clearTimeout(time); } if(memberId != null && memberId != 0) { getMemberInfoCard(memberId); $("#card").addClass("true"); var offset=$(id).offset(); $("#card").css({left:offset.left-60, top:offset.top+25}).show(); } }

事件冒泡的优点和缺点：

那些需要创建的以及驻留在内存中的事件处理器少了。这是很重要的一点，这样我们就提高了性能，并降低了崩溃的风险。

在DOM更新后无须重新绑定事件处理器了。如果你的页面是动态生成的，比如说通过Ajax，你不再需要在元素被载入或者卸载的时候来添加或者删除事件处理器了。

潜在的问题也许并不那么明显，但是一旦你注意到这些问题，你就可以轻松地避免它们：你的事件管理代码有成为性能瓶颈的风险，所以尽量使它能够短小精悍。

不是所有的事件都能冒泡：

blur、focus、load和unload不能像其它事件一样冒泡。事实上blur和focus可以用事件捕获而非事件冒泡的方法获得（在IE之外的其它浏览器中）。

需要注意的是：如果你的代码处理mousemove事件的话你遇上性能瓶颈的风险可就大了，因为mousemove事件触发非常频繁。而mouseout则因为其怪异的表现而变得很难用事件代理来管理。

解决方案：
阻止冒泡行为，当执行mouseover的时候不触发mouseout的操作。

方法1：（比较通用）
延迟执行（setTimeout）、取消延迟（clearTimeout），就是当mouseout的时候延迟执行，而在mouseover的时候取消延迟执行。当鼠标在DIV上边移动的时候因为延迟的执行所以mouseout一直都不会被触发。

function showMemberInfoCard(memberId, id) { //这个id是当前<div>的ID

  if($("#card").hasClass("true")) { //设置Class是为了判断显示层是否正在显示

    clearTimeout(time);

  }

  if(memberId != null && memberId != 0) {

    //做你想要的操作

    $("#card").addClass("true");

    var offset=$(id).offset(); //获取坐标信息

    $("#card").css({left:offset.left-60, top:offset.top+25}).show();

  }

}

function hideMemberInfoCard() {

  if($("#card").hasClass("true")) {

    time=setTimeout(function() {

      $("#card").removeClass("true");

      $("#card").hide();

    }, 500);

  }

}

function showCard() { //显示层

  if($("#card").hasClass("true")) {

    clearTimeout(time);

  }

}

function hideCard() {

  if($("#card").hasClass("true")) {

    time=setTimeout(function() {

      $("#card").removeClass("true");

      $("#card").hide();

    }, 500);

  }

}

方法2：jquery(需要版本号大于1.2.2)
mouseenter和mouseleave事件IE特有的函数，使用jquery就很好的解决了兼容问题。函数的原理当第一次鼠标进入节点区域时触发，以后在节点区域内(子节点间)移动时不触发。

就是把onmouseover->onmouseenter、onmouseout->onmouseleave

但是实际中我发现在Chrome浏览器下不响应这个事件，兼容性问题，所以最终采用第一种方法，相对来说代码难理解一些，请求也多。