已知晓在jq中hover的API就是把mouseenter和mouseleave组合在一起来用的,在jq中实现`hover:function(fnOver,fnOut){
return this.mouseenter(fnOver).mouseleave(fnOut||fnover)
}。
代码如下
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>test</title> ???<script src="jquery-1.12.3.js"></script> ???<style> ???.unit-list{ width: 320px; border:1px solid #ccc;} ???.member-list dd{ background-color: #ccc; margin: 5px 0;} ???</style></head><body> ???<dl class="unit-list"> ???????????<dt class="cf">行政学院 ???????????????<span class="toggle">+</span> ???????????</dt> ???????????<dd> ???????????????<dl class="member-list"> ???????????????????<dd>张三</dd> ???????????????????<dd>李四</dd> ???????????????????<dd>王五</dd> ???????????????</dl> ???????????</dd> ???????</dl><script>$(function(){ ???????$(".unit-list").hover(function(e){ ???????????e.stopPropagation() ???????????console.log("E n t e r"); ???????????$(".member-list dd").mouseenter(function(e){ ???????????????e.stopPropagation() ???????????????console.log(this); //鼠标移出unit-list再移入到<dd>,输出次数会叠加 ???????????}); ???????},function(){ ???????????console.log("L e a v e"); ???????});}) ???</script></body></html>
问题在于,代码执行后。当鼠标移动的时候,代码即执行。
与我们想要的,当鼠标进入后,内部不执行的效果不一致。
每次mouseenter的时候,都会给dd增加绑定事件,绑定事件是不会被覆盖的,而是会按照绑定先后顺序执行,所以就会执行很多次,event.stopPropagation
是阻止冒泡,不会阻止同一个节点上的其他事件。
题主一可以把给dd的绑定事件独立于hover之外,二是可以在hover结束后给dd解绑。请看如下代码:
单独绑定
$(function(){ ???$(‘.member-list dd‘).on(‘mouseenter‘,function(){ ???????console.log(this); ???}); ???$(‘.unit-list‘).hover(function(){ ???????console.log(‘E n t e r‘); ???},function(){ ???????console.log(‘L e a v e‘); ???});});
hover
后撤销绑定
<script>$(function(){ ???var fMouseEnter = function(e){ ???????console.log(this); ???}; ???var jDd = $(‘.member-list dd‘); ???$(‘.unit-list‘).hover(function(e){ ???????jDd.on(‘mouseenter‘,fMouseEnter); ???????console.log(‘E n t e r‘); ???},function(){ ???????jDd.off(‘mouseenter‘,fMouseEnter); ???????console.log(‘L e a v e‘); ???});});</script>
原文地址:https://yq.aliyun.com/ask/18480
jquery hover中嵌套mouseenter,mouseenter函数执行多次的问题解决方案
原文地址:https://www.cnblogs.com/liyouwu/p/9024223.html