cari

Rumah >hujung hadapan web >tutorial js >关于jquery如何阻止子元素相应的mouseout事件

关于jquery如何阻止子元素相应的mouseout事件

黄舟
黄舟asal
2017-06-28 11:43:201280semak imbas

jquery如何阻止子元素相应mouseout事件:
mouseout有一个特点，当鼠标移入子元素的时候，也会触发此事件，但是在实际应用中这个特点往往不是我们想要的，下面就通过代码实例介绍一下如何实现此效果，代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#father
{
  width:100px;
  height:100px;
  background:red;
}
#inner
{
  width:50px;
  height:50px;
  background:green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#father").mouseout(function(e){ 
    evt = window.event||e; 
    var obj=evt.toElement||evt.relatedTarget; 
    var pa=this; 
    if(pa.contains(obj)) return false; 
    $(this).hide(); 
  });   
})
</script>
</head>
<body>
<p id="father">
  <p id="inner"></p>
</p>
</body>
</html

以上代码实现了我们的要求，当鼠标指针移入子p的时候，不会触发事件，但是当鼠标移出父p的时候会触发事件，下面接扫一下实现此效果的过程。
一.实现原理:
原理非常的简单，就是判断当鼠标指针移动的时候，判断与事件的目标节点相关的节点是否是子元素，如果是子元素，则不触发事件，如果不是子元素则触发事件。
二.相关阅读:
1.mouseout事件可以参阅jQuery的mouseout事件一章节。 
2.evt = window.event||e可以参阅var ev=window.event||ev的作用是什么一章节。 
3.toElement属性可以参阅javascript的toElement事件属性一章节。 
4.relatedTarget属性可以参阅javascript的relatedTarget事件属性一章节。 
5.this可以参阅javascript的this用法详解一章节。 
6.contains()函数可以参阅jQuery.contains()方法一章节。
7.hide()函数可以参阅jQuery的hide()方法一章节。

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：javascript实现获取HTML DOM元素的8种方法Artikel seterusnya：javascript实现留言板功能

Artikel berkaitan

Lihat lagi