javascript - addEventListener注册了多个相同事件,如何让其中一个触发,其他的失效??
<code>html: <div id="p"> <div id="c"></div> </div> css: #p {width:300px;height:300px;border:1px solid blue;} #c {width:30px;height:30px;background-color:red;} js: var p=document.getElementById('p'); var c=document.getElementById('c'); registerParentEvent(); registerChildEvent(); // 注册父元素事件 function registerParentEvent(){ p.addEventListener('mousedown',function(e){ e.stopPropagation(); console.log('你点击了父元素'); },false); window.addEventListener('mouseup',function(){ console.log('你离开了父元素!'); },false); } // 注册子元素事件 function registerChildEvent(){ c.addEventListener('mousedown',function(e){ e.stopPropagation(); console.log('你点击了子元素'); },false); window.addEventListener('mouseup',function(){ console.log('你离开了子元素!'); },false); } </code>
在父元素上鼠标松开后提示:
你离开了父元素!
你离开了子元素!
在子元素上鼠标松开后提示:
你离开了父元素!
你离开了子元素!
由于 mouseup 事件注册在 window 上,但是,我需要的效果是,让其能够有分辨力,当鼠标点击的是父元素时,触发的便是和父元素配套的内容,点击子元素时,触发的便是和子元素配套的内容。
回复内容:
<code>html: <div id="p"> <div id="c"></div> </div> css: #p {width:300px;height:300px;border:1px solid blue;} #c {width:30px;height:30px;background-color:red;} js: var p=document.getElementById('p'); var c=document.getElementById('c'); registerParentEvent(); registerChildEvent(); // 注册父元素事件 function registerParentEvent(){ p.addEventListener('mousedown',function(e){ e.stopPropagation(); console.log('你点击了父元素'); },false); window.addEventListener('mouseup',function(){ console.log('你离开了父元素!'); },false); } // 注册子元素事件 function registerChildEvent(){ c.addEventListener('mousedown',function(e){ e.stopPropagation(); console.log('你点击了子元素'); },false); window.addEventListener('mouseup',function(){ console.log('你离开了子元素!'); },false); } </code>
在父元素上鼠标松开后提示:
你离开了父元素!
你离开了子元素!
在子元素上鼠标松开后提示:
你离开了父元素!
你离开了子元素!
由于 mouseup 事件注册在 window 上,但是,我需要的效果是,让其能够有分辨力,当鼠标点击的是父元素时,触发的便是和父元素配套的内容,点击子元素时,触发的便是和子元素配套的内容。
window 只需要绑定一次即可,通过 event.target
来判断事件触发者。
<code>window.addEventListener('mouseup',function(e){ console.log('你离开了: ' + e.target.id); },false);</code>
常规的写法:
<code>p.addEventListener('mousedown',function down(e){ window.addEventListener('mouseup',function up(){ window.removeEventListener('mouseup', up); //p=>up }); //p=>down });</code>

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



PHP 8.4 bringt mehrere neue Funktionen, Sicherheitsverbesserungen und Leistungsverbesserungen mit einer beträchtlichen Menge an veralteten und entfernten Funktionen. In dieser Anleitung wird erklärt, wie Sie PHP 8.4 installieren oder auf PHP 8.4 auf Ubuntu, Debian oder deren Derivaten aktualisieren. Obwohl es möglich ist, PHP aus dem Quellcode zu kompilieren, ist die Installation aus einem APT-Repository wie unten erläutert oft schneller und sicherer, da diese Repositorys in Zukunft die neuesten Fehlerbehebungen und Sicherheitsupdates bereitstellen.

Das Arbeiten mit der Datenbank in CakePHP ist sehr einfach. In diesem Kapitel werden wir die CRUD-Operationen (Erstellen, Lesen, Aktualisieren, Löschen) verstehen.

Um in cakephp4 mit Datum und Uhrzeit zu arbeiten, verwenden wir die verfügbare FrozenTime-Klasse.

Um am Datei-Upload zu arbeiten, verwenden wir den Formular-Helfer. Hier ist ein Beispiel für den Datei-Upload.

CakePHP ist ein Open-Source-Framework für PHP. Es soll die Entwicklung, Bereitstellung und Wartung von Anwendungen erheblich vereinfachen. CakePHP basiert auf einer MVC-ähnlichen Architektur, die sowohl leistungsstark als auch leicht zu verstehen ist. Modelle, Ansichten und Controller gu

Der Validator kann durch Hinzufügen der folgenden zwei Zeilen im Controller erstellt werden.

Die Anmeldung bei CakePHP ist eine sehr einfache Aufgabe. Sie müssen nur eine Funktion verwenden. Sie können Fehler, Ausnahmen, Benutzeraktivitäten und von Benutzern durchgeführte Aktionen für jeden Hintergrundprozess wie Cronjob protokollieren. Das Protokollieren von Daten in CakePHP ist einfach. Die Funktion log() wird bereitgestellt

Visual Studio Code, auch bekannt als VS Code, ist ein kostenloser Quellcode-Editor – oder eine integrierte Entwicklungsumgebung (IDE) –, die für alle gängigen Betriebssysteme verfügbar ist. Mit einer großen Sammlung von Erweiterungen für viele Programmiersprachen kann VS Code c
