Rumah > Artikel > hujung hadapan web > jquery鼠标离开mouseout时会处理一个事务时怎么排除鼠标在子元素时不影响

jquery鼠标离开mouseout时会处理一个事务时怎么排除鼠标在子元素时不影响

黄舟asal: 2017-06-28 11:25:441296semak imbas

jquery鼠标离开(mouseout)时，会处理一个事务，但是怎么排除鼠标在子元素时不影响

<div class="a"><div class="a1" style="display:none;"></div></div>
jquery中有mouseout离开时
$(".a").hover(function(){
$(this).find(".a1").css("display","block");
});	
$(".a").mouseout(function(){
$(this).find(".a1").css("display","none");	
});

以上，当鼠标其子元素时，也相当于离开了当前DIV，怎么才能避免呢？

可以使用 jQuery 事件 - mouseleave() 方法达到这个效果。

定义和用法

　　当鼠标指针离开元素时，会发生 mouseleave 事件。

　　该事件大多数时候会与 mouseenter 事件一起使用。

　　mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数。

　　注释：与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。请看下面例子的演示。

语法

$(selector).mouseleave()

实例

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
    x=0;
    y=0;
    $(document).ready(function(){
          $("div.out").mouseout(function(){
                $(".out span").text(x+=1);
          });
          $("div.leave").mouseleave(function(){
                $(".leave span").text(y+=1);
          });
    });
</script>
</head>
<body>
    <p>不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。</p>
    <p>只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。</p>
    <div class="out" style="background-color:lightgray;padding:20px;width:40%;float:left">
        <h2 style="background-color:white;">被触发的 Mouseout 事件：<span></span></h2>
    </div>
    <div class="leave" style="background-color:lightgray;padding:20px;width:40%;float:right">
        <h2 style="background-color:white;">被触发的 Mouseleave 事件：<span></span></h2>
    </div>
</body>
</html>

楼上就一个函数的事情有必要这样么？代码改成如下

$(".a").hover(
function(){
$(this).find(".a1").css("display","block");
},
function(){
$(this).find(".a1").css("display","none");
}
);

或者

$(".a").mouseover(function(){
$(this).find(".a1").css("display","block");
});
$(".a").mouseleave(function(){
$(this).find(".a1").css("display","none");
});

Atas ialah kandungan terperinci jquery鼠标离开mouseout时会处理一个事务时怎么排除鼠标在子元素时不影响. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：jQuery事件mouseover和mouseout当快速移动时事件延迟触发问题Artikel seterusnya：javascript做随机数字字母验证码

Artikel berkaitan

Lihat lagi