Maison >interface Web >js tutoriel >À propos de la façon dont jquery empêche l'événement mouseout correspondant des éléments enfants

À propos de la façon dont jquery empêche l'événement mouseout correspondant des éléments enfants

黄舟original: 2017-06-28 11:43:201307parcourir

Comment jquery empêche les éléments enfants des événements mouseout correspondants :
mouseout a une fonctionnalité Lorsque la souris se déplace dans un élément enfant, cet événement sera également déclenché. Cependant, dans les applications réelles, cela. La fonctionnalité n'est souvent pas ce que nous souhaitons. Présentons comment obtenir cet effet à l'aide de exemples de code. Les exemples de code sont les suivants :

<!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

Le code ci-dessus répond à nos exigences. Lorsque le pointeur de la souris se déplace vers le sous-p , l'événement ne sera pas déclenché, mais l'événement sera déclenché lorsque la souris quittera le p parent. Analysons le processus pour obtenir cet effet.
1. Principe de mise en œuvre :
Le principe est très simple, c'est-à-dire que lorsque le pointeur de la souris bouge, il est jugé si le nœud lié au nœud cible de l'événement est un élément enfant. élément, l'événement ne sera pas déclenché. S'il ne s'agit pas d'un élément enfant, l'événement est déclenché.
2. Lecture connexe :
1. Pour l'événement mouseout, veuillez vous référer au chapitre sur l'événement mouseout de jQuery.
2.evt = window.event||e, veuillez vous référer au chapitre Quelle est la fonction de var ev=window.event||ev.
3. Pour l'attribut toElement, veuillez vous référer au chapitre attribut d'événement toElement de javascript.
4. Pour l'attribut RelatedTarget, veuillez vous référer au chapitre Attribut d'événement RelatedTarget de javascript.
5. Pour cela, veuillez vous référer à l'explication détaillée de cette utilisation en JavaScript.
La fonction 6.contains() peut être trouvée dans le chapitre sur la méthode jQuery.contains().
7. Pour la fonction hide(), veuillez vous référer au chapitre sur la méthode jQuery hide().

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：8 façons d'obtenir des éléments HTML DOM en utilisant javascriptArticle suivant：8 façons d'obtenir des éléments HTML DOM en utilisant javascript

Articles Liés

Voir plus