suchen

Heim >Web-Frontend >js-Tutorial >jQuery verhindert die Analyse von Event-Bubbling-Instanzen

jQuery verhindert die Analyse von Event-Bubbling-Instanzen

不言
不言Original
2018-07-03 14:12:591526Durchsuche

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

2. Unter IE

: Kann Bubbling-Ereignisse blockieren, aber Standardereignisse zulassenevent.stopPropagationevent.cancelBubble  = true;3.

/Unter IE

: 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>
  $(&#39;.p1&#39;).bind(&#39;click&#39;,function(){
    alert("p1");
  });
  $(&#39;.p2&#39;).bind(&#39;click&#39;,function(){
    alert("p2");
//    return false;//也可以通过return false 阻止冒泡
    if(window.event){//IE下阻止冒泡
      event.cancelBubble = true;
    }else{
      event.stopPropagation();
    }
  });
  $(&#39;#a1&#39;).bind(&#39;click&#39;,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 EasyUI


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

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So legen Sie die Anmeldeberechtigung für das Routing in Vue festNächster Artikel：So legen Sie die Anmeldeberechtigung für das Routing in Vue fest

In Verbindung stehende Artikel

Mehr sehen