防止datepicker触发父级mouseleave

本文介绍了防止datepicker触发父级mouseleave的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 使用jQuery $显示 abolute div $。animate（{height： 'toggle'，opacity：'toggle'}）关于jQuery $。hover（）。 我有一个jQuery UI日期选择器连接到上述绝对 div 中的一个div，其中 changeMonth：true 和 changeYear：true 。 年份发生变化或选择日期时，动画会触发。 如何防止月份/年份更改&从触发 $。hover（）？ http://jsfiddle.net/e3zP2/ html < div id =hoverAnchor>悬停我< / div> < div id =hoverMestyle =display：none> 任意文本< div id =dateSelector>< / div> < / div> js $（document）.ready（function（）{ $（＃dateSelector）。datepicker（{ changeMonth：true， changeYear：true ））; $（＃hoverAnchor）.add（$（＃hoverMe））.hover（function（）{ $（＃hoverMe）。stop（true，false）.animate（{ height：'toggle'， opacity：'toggle'}，200）; }）; }）; 解决方案您需要做一些事情才能做到这一点首先，你需要将HTML包装在一个 div 中充当容器： / p> HTML： < div id =container> < div id =hoverAnchor>悬停我< / div> < div id =hoverMestyle =display：none>任意文本< div id =dateSelector>< / div> < / div> < / div> 接下来，不是使用 .hover（） （它有时可能不可靠），我推荐使用 .mouseenter（） 以及 .mouseleave（） 。还可以使用 var 来保存日期选择器打开/关闭的布尔值。这个布尔值的原因是由于输入。点击后，第二个 .mouseenter（）事件将被调用，因此如果没有它， #hoverme 会切换一秒 $（document）.ready（function（）{ $（＃dateSelector）。datepicker （{ changeMonth：true， changeYear：true }）; var _enter = false; $（＃container）.add（ $（＃container））。mouseenter（function（）{ if（！_enter）{ $（＃hoverMe）。stop（true，false）.animate（{ height：'toggle'， opacity：'toggle'}，200）; } _enter = true; }）。mouseleave（function（ ）{_enter = false; $（＃hoverMe）。stop（true，false）.animate（{ height：'toggle'， opacity：'toggle '}，200）; }）; }）; DEMO： http://jsfiddle.net/dirtyd77/e3zP2/18/ 希望这会有所帮助！ I display an abolute div with a jQuery $.animate({height: 'toggle', opacity: 'toggle'}) on a jQuery $.hover().I have a jQuery UI datepicker attached to a div within the aforementioned absolute div with changeMonth: true and changeYear: true.When a month or year are changed or a date is selected the animation fires.How can I prevent the month/year change & date selection from triggering the $.hover()?http://jsfiddle.net/e3zP2/html<div id="hoverAnchor">hover me</div><div id="hoverMe" style="display:none"> arbitrary text <div id="dateSelector"></div></div>js$(document).ready(function () { $("#dateSelector").datepicker({ changeMonth: true, changeYear: true }); $("#hoverAnchor").add($("#hoverMe")).hover(function(){ $("#hoverMe").stop(true,false).animate({ height: 'toggle', opacity: 'toggle' }, 200); });}); 解决方案 You need to do a couple things in order for this to work properly.First, you need to wrap the HTML in a div to act as the container:HTML:<div id="container"> <div id="hoverAnchor">hover me</div> <div id="hoverMe" style="display:none">arbitrary text <div id="dateSelector"></div> </div></div>Next, rather than using .hover() (which can sometimes be unreliable), I recommend using .mouseenter() along with .mouseleave(). Also use a var to hold boolean of whether datepicker open/closed. The reason for this boolean is due to the input. On click, a second .mouseenter() event will be called, so without it, #hoverme would toggle a second time.$(document).ready(function () { $("#dateSelector").datepicker({ changeMonth: true, changeYear: true }); var _enter = false; $("#container").add( $("#container")).mouseenter(function () { if (!_enter) { $("#hoverMe").stop(true, false).animate({ height: 'toggle', opacity: 'toggle' }, 200); } _enter = true; }).mouseleave(function () { _enter = false; $("#hoverMe").stop(true, false).animate({ height: 'toggle', opacity: 'toggle' }, 200); });});DEMO:http://jsfiddle.net/dirtyd77/e3zP2/18/Hope this helps! 这篇关于防止datepicker触发父级mouseleave的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！