Expliquez d'abord la différence entre les deux méthodes d'EmptiserDefault et StopPropagation dans JS:
Quel est le rôle de la méthode de prévention? Nous savons, par exemple, <a href = "http://www.baidu.com"> baidu </a>, c'est la chose la plus fondamentale en html. .baidu .. com, c'est le comportement par défaut de l'étiquette <a>, et la méthode empêchée est d'empêcher d'autres choses de se produire son comportement par défaut. Voir un paragraphe de code et tout le monde comprend:
Copier le code du code comme suit:
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "content-type" content = "text / html; charset = utf-8" /> />
<Title> JS Empêchez le lien de saut </TITAL>
<script type = "text / javascript">
Fonction stopdefault (e) {
if (e && e.preventdefault)
E.PreventDefault ();
autre
window.event.returnvalue = false;
Retourne false;
}
</cript>
</ head>
<body>
<a href = "http://www.baidu.com" id = "testLink"> baidu </a>
<script type = "text / javascript">
var test = document.getElementById ('testLink');
test.onclick = fonction (e) {{
Alert ('mon adresse de lien est:' + this.href + ', mais je ne sauterai pas.');
Stopdefault (E);
}
</cript>
</docy>
</html>
À l'heure actuelle, cliquez sur le lien Baidu, et vous n'ouvrez pas http://www.baidu.com, mais il suffit d'apparaître une boîte de dialogue d'alerte.
Qu'en est-il de la méthode stoppropagation? Avant de parler de la méthode stoppropagation, vous devez vous expliquer l'agent d'événement JS.
Les procurations d'événements utilisent deux fonctionnalités qui sont souvent ignorées dans l'incident de Javasciprt: les éléments de bouillonnement des événements et cible. Lorsqu'un événement sur un élément est déclenché, par exemple, la souris clique sur un bouton et le même événement sera déclenché dans tous les ancêtres de cet élément. Ce processus est appelé incident bouillonnant; Pour tout événement, ses éléments cibles sont des éléments primitifs, et dans notre exemple, mais aussi le bouton. L'élément cible apparaît sous la forme d'attributs dans nos objets d'événement. Si vous utilisez un agent d'événement, nous pouvons ajouter le processeur d'événements à un élément, attendez que l'événement bouillonne à partir de ses éléments de sous-niveau et peut facilement déterminer quel élément l'événement commence.
La méthode stoppropagation consiste à empêcher l'événement JS de bouillonner et de voir un code.
Copier le code du code comme suit:
<!
<Html xmlns = "http://www.w3.org/1999/xhtml" lang = "gb2312">
<adal>
<Title> Empêcher la transmission de bulles incidents JS (Cancelbubble, stopPropagation) </Title>
<meta name = "keywords" contenu = "js, bouillonnement d'événement, annulation, stoppropagation" />
<cript>
Fonction dosomething (obj, evt) {
alerte (obj.id);
var e = (evt)?
if (window.event) {
e.cancelbubble = true;
} Autre {
//e.preventDefault ();
e.stoppropagation ();
}
}
</cript>
</ head>
<body>
<div id = "parent1" onclick = "alert (this.id)">
<p> c'est Pain1 div.
<div id = "child1" onclick = "alert (this.id)">
<p> c'est Child1.
</div>
<p> c'est Pain1 div.
</div>
<br />
<div id = "parent2" onclick = "alert (this.id)">
<p> C'est Parent2 Div.
<div id = "child2" onclick = "DoSomething (this, event);" >> ">
<p> c'est un enfant 2.
</div>
<p> C'est Parent2 Div.
</div>
</docy>
</html>
Comprenons le code ci-dessus.