阻止子元素的点击事件
问题描述：
今天在调试页面的时候遇到一个奇怪的现象，在一个父元素上面定义了一个点击事件，在父元素下面是一个一个的li标签，这上面没有任何点击事件。现象是当点击其中一个li标签时会发生一些动作。
这个问题困惑了我好久，我对代码翻了好几遍，最后才确定是，点击子元素时也将会触发父元素的事件。当时我把这种现象是在父元素上定义点击事件时，实际上是在这个区域中都定义了点击事件，所以当点击子元素时，实际上也是在点击父元素。
但是更科学的解释是：如果在点击子元素时，如果子元素中没有点击事件，那么该点击事件将自动冒泡到父元素，直到能找到一个可以处理点击事件的函数。
那这种解释可以带来的好处是，可以有方法来屏蔽这种现象，那就是阻止点击事件的冒泡。对于jQuery而言，就是stopPropagation().对于下面的代码而言，大家可以尝试下，如果没有stopPropagation和有stopPropagation之间的差别。
代码如下：
<!DOCTYPE html><html><meta http-equiv="content-type" content="text/html;charset=utf8"><link rel="stylesheet" type="text/css" href=""><script src="./jQuery/jquery-2.1.4.js"></script><script type="text/javascript">
$(function() {
$("#mainp").click(function(event) {
if($(this).children('ul').css("display") == "none")
$(this).children('ul').css("display","block"); else
$(this).children('ul').css('display',"none");
});
//阻止向上冒泡
$("#mainp > ul").click(function(event) {
event.stopPropagation();
});
});</script><title>测试如何屏蔽子元素的事件</title><body>
<p id="mainp">
<button>click me</button>
<ul style="display:none">
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
</p></body></html> 更多相关教程请访问 JavaScript视频教程
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1359
52
So fügen Sie in Vue Berührungsereignisse zu Bildern hinzu
May 02, 2024 pm 10:21 PM
Wie füge ich in Vue ein Klickereignis zum Bild hinzu? Importieren Sie die Vue-Instanz. Erstellen Sie eine Vue-Instanz. Fügen Sie Bilder zu HTML-Vorlagen hinzu. Fügen Sie Klickereignisse mit der v-on:click-Direktive hinzu. Definieren Sie die handleClick-Methode in der Vue-Instanz.
Entwickeln Sie leistungsstarke Desktop-Anwendungen mit Golang
Mar 19, 2024 pm 05:45 PM
Verwenden Sie Golang, um leistungsstarke Desktop-Anwendungen zu entwickeln. Mit der kontinuierlichen Entwicklung des Internets sind Menschen untrennbar mit verschiedenen Arten von Desktop-Anwendungen verbunden. Für Entwickler ist es von entscheidender Bedeutung, effiziente Programmiersprachen zu verwenden, um leistungsstarke Desktop-Anwendungen zu entwickeln. In diesem Artikel wird die Verwendung von Golang (Go-Sprache) zur Entwicklung leistungsstarker Desktop-Anwendungen vorgestellt und einige spezifische Codebeispiele bereitgestellt. Golang ist eine von Google entwickelte Open-Source-Programmiersprache. Sie zeichnet sich durch Einfachheit, Effizienz, starke Parallelität usw. aus und eignet sich sehr gut für
So richten Sie Jump on Laui-Anmeldeseite ein
Apr 04, 2024 am 03:12 AM
Schritte zur Sprungeinstellung der Layui-Anmeldeseite: Sprungcode hinzufügen: Fügen Sie im Anmeldeformular ein Beurteilungsereignis hinzu, klicken Sie auf die Schaltfläche „Senden“ und springen Sie nach erfolgreicher Anmeldung über window.location.href zur angegebenen Seite. Ändern Sie die Formularkonfiguration: Fügen Sie dem Formularelement von „lay-filter="login" ein verstecktes Eingabefeld mit dem Namen „redirect“ und dem Wert der Zielseitenadresse hinzu.
PHP-Tipps: Implementieren Sie schnell die Funktion „Zurück zur vorherigen Seite'.
Mar 09, 2024 am 08:21 AM
PHP-Tipps: Implementieren Sie schnell die Funktion zum Zurückkehren zur vorherigen Seite. Bei der Webentwicklung müssen wir häufig die Funktion zum Zurückkehren zur vorherigen Seite implementieren. Solche Vorgänge können das Benutzererlebnis verbessern und Benutzern die Navigation zwischen Webseiten erleichtern. In PHP können wir diese Funktion durch einfachen Code erreichen. In diesem Artikel wird erläutert, wie Sie die Funktion zum Zurückkehren zur vorherigen Seite schnell implementieren können, und es werden spezifische PHP-Codebeispiele bereitgestellt. In PHP können wir $_SERVER['HTTP_REFERER'] verwenden, um die URL der vorherigen Seite abzurufen
Hongmeng HarmonyOS- und Go-Sprachentwicklung
Apr 08, 2024 pm 04:48 PM
Einführung in die Sprachentwicklung von HarmonyOS und Go. HarmonyOS ist ein von Huawei entwickeltes verteiltes Betriebssystem, und Go ist eine moderne Programmiersprache. Die Kombination der beiden bietet eine leistungsstarke Lösung für die Entwicklung verteilter Anwendungen. In diesem Artikel wird die Verwendung der Go-Sprache für die Entwicklung in HarmonyOS vorgestellt und das Verständnis anhand praktischer Fälle vertieft. Installation und Einrichtung Um die Go-Sprache zum Entwickeln von HarmonyOS-Anwendungen zu verwenden, müssen Sie zuerst GoSDK und HarmonyOSSDK installieren. Die spezifischen Schritte sind wie folgt: #Installieren Sie GoSDKgogetgithub.com/golang/go#Set PATH
Was ist der ereignisgesteuerte Mechanismus von C++-Funktionen in der gleichzeitigen Programmierung?
Apr 26, 2024 pm 02:15 PM
Der ereignisgesteuerte Mechanismus in der gleichzeitigen Programmierung reagiert auf externe Ereignisse, indem er beim Eintreten von Ereignissen Rückruffunktionen ausführt. In C++ kann der ereignisgesteuerte Mechanismus mit Funktionszeigern implementiert werden: Funktionszeiger können Callback-Funktionen registrieren, die beim Eintreten von Ereignissen ausgeführt werden sollen. Lambda-Ausdrücke können auch Ereignisrückrufe implementieren und so die Erstellung anonymer Funktionsobjekte ermöglichen. Im konkreten Fall werden Funktionszeiger verwendet, um Klickereignisse für GUI-Schaltflächen zu implementieren, die Rückruffunktion aufzurufen und Meldungen zu drucken, wenn das Ereignis auftritt.
Detaillierte Erläuterung des Abrufens von Webseitenelementen durch JavaScript
Apr 09, 2024 pm 12:45 PM
Antwort: JavaScript bietet eine Vielzahl von Methoden zum Abrufen von Webseitenelementen, einschließlich der Verwendung von IDs, Tag-Namen, Klassennamen und CSS-Selektoren. Detaillierte Beschreibung: getElementById(id): Elemente basierend auf einer eindeutigen ID abrufen. getElementsByTagName(tag): Ruft die Elementgruppe mit dem angegebenen Tag-Namen ab. getElementsByClassName(class): Ruft die Elementgruppe mit dem angegebenen Klassennamen ab. querySelector(selector): Verwenden Sie den CSS-Selektor, um das erste passende Element abzurufen. querySelectorAll(selector): Alle Übereinstimmungen mithilfe des CSS-Selektors abrufen
Warum kann das Klickereignis in js nicht wiederholt ausgeführt werden?
May 07, 2024 pm 06:36 PM
Klickereignisse in JavaScript können aufgrund des Event-Bubbling-Mechanismus nicht wiederholt ausgeführt werden. Um dieses Problem zu lösen, können Sie die folgenden Maßnahmen ergreifen: Verwenden Sie die Ereigniserfassung: Geben Sie einen Ereignis-Listener an, der ausgelöst wird, bevor das Ereignis in die Luft sprudelt. Übergabe von Ereignissen: Verwenden Sie event.stopPropagation(), um das Sprudeln von Ereignissen zu stoppen. Verwenden Sie einen Timer: Lösen Sie den Ereignis-Listener nach einiger Zeit erneut aus.
