Heim > Artikel > Web-Frontend > jQuery verhindert die Analyse von Event-Bubbling-Instanzen
jQuery verhindert die Analyse von Event-Bubbling-Instanzen
- 不言Original
- 2018-07-03 14:12:591421Durchsuche
In diesem Artikel wird hauptsächlich die Methode von jQuery zur Verhinderung von Ereignissprudeln vorgestellt. Er analysiert anhand von Beispielen das Prinzip und die gängigen Implementierungsmethoden von jQuery In Form vollständiger Beispiele können sich Freunde, die es benötigen, auf
beziehen. Dieser Artikel beschreibt das Beispiel von jQuery, das das Sprudeln von Ereignissen verhindert. Teilen Sie es als Referenz mit allen:
In unserem üblichen Entwicklungsprozess werden wir definitiv auf die Situation stoßen, ein p in ein p zu packen (dieses p kann jedoch ein Element dazwischen sein). Zu jedem p wurden zwei Ereignisse hinzugefügt. Wenn Sie auf das p klicken, möchten wir das Ereignis dieses p gleichzeitig ausführen Blasenbildung muss verhindert werden.
Laienhaft ausgedrückt: Sie schauen zu Hause fern und verstecken sich in Ihrem eigenen kleinen Zimmer, aber Sie möchten nicht, dass der Ton die Ohren Ihrer Eltern nebenan erreicht kann sich unter der Steppdecke oder an der Wand verstecken. Die Schalldämmwirkung ist sehr gut, das Blockieren von Schall kann als Verhindern von Blasenbildung verstanden werden.
Drei Möglichkeiten, Ereignissprudeln zu verhindern
1: Standardereignisse und Sprudelnde Ereignisse können blockiert werden return false
: Kann Bubbling-Ereignisse blockieren, aber Standardereignisse zulassenevent.stopPropagationevent.cancelBubble = true;3.
: Kann Standardereignisse blockieren, aber Bubbling-Ereignisse zulassenevent.preventDefault();event.returnValue = false Die oben genannten drei Methoden werden in verschiedenen Szenarien verwendet und können sinnvoll verwendet werden. Sie können einige Tests selbst durchführen:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jQuery阻止冒泡</title>
<style>
.p1{
width: 140px;
border: 1px solid blue;
}
.p2{
width: 100px;
height: 100px;
margin: 20px;
border: 1px solid red;
}
</style>
</head>
<body>
<p class="p1">
<p class="p2">
点我呀！！！！
</p>
</p>
<a href="http:www.baidu.com" rel="external nofollow" id="a1">百度</a>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$('.p1').bind('click',function(){
alert("p1");
});
$('.p2').bind('click',function(){
alert("p2");
// return false;//也可以通过return false 阻止冒泡
if(window.event){//IE下阻止冒泡
event.cancelBubble = true;
}else{
event.stopPropagation();
}
});
$('#a1').bind('click',function(){
if(window.event){//IE下阻止默认事件
event.returnValue = false;
}else{
event.preventDefault();
}
alert("我是链接");
//return false;//如果不添加任何阻止事件，先弹框，后跳转，我们可以通过return false阻止跳转
});
</script>
</body>
</html>Laufende Ergebnisse:
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.
Verwandte Empfehlungen:
Auswählen einer bestimmten Registerkarte basierend auf JQuery EasyUIVerwandte JQuery- und DOM-Knotenbetriebsmethoden und -attribute Datensätze Verwenden Sie jQuery, um die schwebende @ ID-Anzeige in WordPress zu implementieren
Das obige ist der detaillierte Inhalt vonjQuery verhindert die Analyse von Event-Bubbling-Instanzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!