你的位置: Kiyo'Space首页 JavaScript/Jscript 阅读文章 欢迎留下您的足迹

jquery中解决div mouseout事件冒泡的问题

[ JavaScript/Jscript ] 分享

在使用jquery进行事件监听时,有可能会出现事件冒泡的问题

解决的办法是,使用jquery的bind方法

如:现在有一个div对象需要监听他的鼠标事件:

Html代码
<div class=“dpx2″><div class=“dpx2_px” style=“cursor:pointer;” id=“searchSort”>请选择排序方式↓</div> <div class=“dpx2_px_xl” id=“sortList” style=“display:none;position:absolute;z-index:5;”>
<div><a class=“sortA”>按时间升序↑</a></div>
<div><a class=“sortA”>按时间降序↓</a></div>
<div><a class=“sortA”>按评论数量升序↑</a></div>
<div><a class=“sortA”>按评论数量降序↓</a></div>
<div><a class=“sortA”>按点击数升序↑</a></div>
<div><a class=“sortA”>按点击数降序↓</a></div>
</div>
</div>

当鼠标移动到ID为searchSort的Div上时,显示下面的div。当鼠标移出下面的div时,隐藏div

JS为:

Js代码
$(function(){
var sortList = $(“#sortList”);
$(“#searchSort”).mouseover(function() {
var offset = $(this).offset();
sortList.css(“left”, offset.left);
sortList.css(“top”, offset.top+20);
sortList.show();
});
//关键的一句,绑定Div对象的mouseleave事件
sortList.bind(“mouseleave”, function() {
$(this).hide();
});
});

jquery中的bind方法(jquery的版本至少要1.2.2)。$(”).bind(“mouseenter”,function(){})代替$(…).mouseover();

$(”).bind(“mouseleave”,function(){})代替$(…).mouseout();

因为bind方法可以屏蔽浏览器的一些事件冒泡行为。

这样,就不会出现刚刚所说的mouseover,mouseout错误触发的问题。

另外,ie支持mouseenter,mouseleave事件,firefox等不支持,但通过jquery的这种方式后,所有浏览器均支持上面的语法

jquery中解决div mouseout事件冒泡的问题

没有评论

  • (Required)
  • (Required, will not be published)