在jQueryMouseLeave和mouseout的区别的一个例子

本文详细描述了jQuery MouseLeave和mouseout的区别，并分享它与您的参考。详情如下

许多人使用jQuery实现鼠标悬停效果，通常使用mouseover和mouseout事件。在实现的过程中，可能会有一些不良的条件。

先看看使用mouseout的影响：

先看看使用mouseout的影响：

使用mouseout事件：

第一行
第二行
第三线
jQuery（文档）Ready（函数（$）{）
$（#标题）。Mouseover（function（）{）
偏移量= $（this）；
$（#一览表）。Css（{左：offset.left，顶部：偏移。顶+ 19 }）显示（）；
}）；
$（#容器）。Mouseout（function（）{）
$（#列表）隐藏（）；
}）；
}）；

一线二线第三线发现mouseout事件的使用，只要在一个移动的容器在下拉列表#鼠标，触发隐藏（），因为mouseout事件冒泡，也就是事件可以同时绑定到容器元素，所以老鼠从每个子元素会触发我们的（隐藏）。

从jQuery 1.3、2鼠标事件已被添加，MouseEnter和MouseLeave。不像mouseout事件MouseLeave事件触发的，只有当鼠标指针离开选定的元素。

让我们在看看MouseLeave事件的影响：
使用MouseLeave事件：

第一行
第二行
第三线
jQuery（文档）Ready（函数（$）{）
$（# title2）。Mouseover（function（）{）
偏移量= $（this）；
$（#清单）。Css（{左：offset.left，顶部：偏移。顶+ 19 }）显示（）；
}）；
/ / MouseLeave绑定事件，效果很好
$（# container2）。Mouseleave（function（）{）
$（#清单）藏（）；
}）；
}）；
第一行，第二行，和MouseLeave和mouseout事件第三线都是有用的，因为事件的泡沫是非常有用的在某些时候

解决div mouseout事件冒泡

解决方案是使用jQuery的绑定方法。

例如，现在有一个div对象需要监视他的鼠标事件。

请选择排序键

按上升时间
根据下降时间
根据评论的数量上升
根据降序排列的注释数：
单击升序
按降序单击数字：
When the mouse moves to the Div of the ID searchSort, the div below is displayed.When the mouse moves out of the div below, hide the div

JS：

$（函数（）{（））
无功sortlist = $（# sortlist ）；
$（# searchsort）。Mouseover（function（）{）
偏移量= $（this）；
SortList.css（左
SortList.css（顶
SortList.show（）；
}）；
/ /关键短语，结合div的MouseLeave事件
SortList.bind（MouseLeave
美元（这个）；
}）；
}）；
根据上述解释，模拟了下拉效应。

1。无论是鼠标指针离开选定的元素或子元素的mouseout事件触发。

2。只有当鼠标指针离开选定的元素将MouseLeave事件被触发。
深圳市公司
组管理
$（。sel_box）。Click（函数（事件）{
如果（event.target.id = = 'sel_dept）{
$（# sel_dept_sh ）（显示）； / /显示下拉框
$（# sel_dept_sh P字体）。Click（function（）{（）{）
$（# sel_dept ）瓦迩（）；
文本（$）；
警报（文本）；
$（# sel_dept ），瓦迩（文），Css（颜色
$（# sel_dept_sh ）藏（）；
}）；

其他{ }
$（# sel_dept_sh ）藏（）；
}
}）；

$（。sel_box）。Bind（MouseLeave ），功能（{ / /模仿MouseLeave实现下拉框的效果
$（这个）。查找（隐藏）。隐藏（）；
}）；

$（。sel_box）。Bind（怪），功能（{ / /和mouseout都没有，什么时候会触发
$（这个）。查找（隐藏）。隐藏（）；
}）；
以上是本文的全部内容，希望能对大家有所帮助。