


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>

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



PHP 8.4 membawa beberapa ciri baharu, peningkatan keselamatan dan peningkatan prestasi dengan jumlah penamatan dan penyingkiran ciri yang sihat. Panduan ini menerangkan cara memasang PHP 8.4 atau naik taraf kepada PHP 8.4 pada Ubuntu, Debian, atau terbitan mereka

Bekerja dengan pangkalan data dalam CakePHP adalah sangat mudah. Kami akan memahami operasi CRUD (Buat, Baca, Kemas Kini, Padam) dalam bab ini.

Untuk bekerja dengan tarikh dan masa dalam cakephp4, kami akan menggunakan kelas FrozenTime yang tersedia.

Untuk mengusahakan muat naik fail, kami akan menggunakan pembantu borang. Di sini, adalah contoh untuk muat naik fail.

CakePHP ialah rangka kerja sumber terbuka untuk PHP. Ia bertujuan untuk menjadikan pembangunan, penggunaan dan penyelenggaraan aplikasi lebih mudah. CakePHP adalah berdasarkan seni bina seperti MVC yang berkuasa dan mudah difahami. Model, Pandangan dan Pengawal gu

Pengesah boleh dibuat dengan menambah dua baris berikut dalam pengawal.

Kod Visual Studio, juga dikenali sebagai Kod VS, ialah editor kod sumber percuma — atau persekitaran pembangunan bersepadu (IDE) — tersedia untuk semua sistem pengendalian utama. Dengan koleksi sambungan yang besar untuk banyak bahasa pengaturcaraan, Kod VS boleh menjadi c

Log masuk CakePHP adalah tugas yang sangat mudah. Anda hanya perlu menggunakan satu fungsi. Anda boleh log ralat, pengecualian, aktiviti pengguna, tindakan yang diambil oleh pengguna, untuk sebarang proses latar belakang seperti cronjob. Mengelog data dalam CakePHP adalah mudah. Fungsi log() disediakan
