Informationen dazu, wie JQuery das entsprechende Mouseout-Ereignis von untergeordneten Elementen verhindert-js-Tutorial-php.cn

Informationen dazu, wie JQuery das entsprechende Mouseout-Ereignis von untergeordneten Elementen verhindert

黄舟

Freigeben： 2017-06-28 11:43:20

Original

1305 Leute haben es durchsucht

Wie JQuery verhindert, dass untergeordnete Elemente entsprechende Mouseout-Ereignisse aufweisen:Mouseout verfügt über eine Funktion, wenn sich die Maus in ein untergeordnetes Element bewegt. In tatsächlichen Anwendungen wird dies jedoch ebenfalls ausgelöst Funktion ist oft nicht das, was wir wollen. Lassen Sie uns anhand von Code-Beispielen vorstellen, wie Sie diesen Effekt erzielen können:
Der obige Code setzt unsere Anforderungen um. Wenn sich der Mauszeiger in das Unter-P bewegt, wird das Ereignis nicht ausgelöst, aber das Ereignis wird ausgelöst, wenn sich die Maus aus dem übergeordneten P bewegt. Lassen Sie uns den Prozess scannen, um diesen Effekt zu erzielen.

1. Implementierungsprinzip:

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

Nach dem Login kopieren

Das Prinzip ist sehr einfach, das heißt, wenn der Mauszeiger bewegt wird, wird beurteilt, ob der Knoten, der mit dem Zielknoten des Ereignisses verknüpft ist, ein untergeordnetes Element ist Element, das Ereignis wird nicht ausgelöst. Wenn es sich nicht um ein untergeordnetes Element handelt, wird das Ereignis ausgelöst.

2. Verwandte Lektüre:
1. Informationen zum Mouseout-Ereignis finden Sie im Kapitel über das Mouseout-Ereignis von jQuery.
2.evt = window.event||e, siehe Kapitel Was ist die Funktion von var ev=window.event||ev?
3. Informationen zum toElement-Attribut finden Sie im Kapitel toElement-Ereignisattribut von Javascript.
4. Informationen zum Attribut „RelatedTarget“ finden Sie im Kapitel „RelatedTarget“-Ereignisattribut von Javascript.
5. Bitte beachten Sie hierzu die ausführliche Erläuterung dieser Verwendung in JavaScript.
Die Funktion 6.contains() finden Sie im Kapitel zur jQuery.contains()-Methode.
7. Informationen zur Funktion hide() finden Sie im Kapitel zur jQuery-Methode hide().

Das obige ist der detaillierte Inhalt vonInformationen dazu, wie JQuery das entsprechende Mouseout-Ereignis von untergeordneten Elementen verhindert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!