防止datepicker触发父级mouseleave [英] prevent datepicker from triggering parent mouseleave

问题描述

使用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
< pre $ $（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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！