Rumah hujung hadapan web tutorial js javascript冒泡事件的用法示例(代码)

javascript冒泡事件的用法示例(代码)

Oct 27, 2018 pm 03:20 PM
peristiwa menggelegak

本篇文章给大家带来的内容是关于javascript冒泡事件的用法示例(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

说明:当下层元素和上层元素支持同一事件,当上层事件触发时,下层事件也触发,这就叫事件冒泡。

取消事件冒泡:ev.cancelBubble = true

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        body{
        background:yellow;}
        div{
        width:300px;
        height:300px;
        background:green;
        }
        </style>
    </head>
    <body  onclick="di()">
        <div onclick="ding()"></div>    
    </body >
    <script>
    function di(){
    alert(&#39;底层&#39;)
    
    }
    function ding(e){
    var ev = e|| event

// 取消事件冒泡,其实是阻止事件向下传递
            ev.cancelBubble = true
    alert(&#39;上层社会&#39;)
    }
    
    </script>

</html>
Salin selepas log masuk

点击上层div,会连带触发下层事件。取消冒泡只需要:ev.cancelBubble = true

2018102322060631.png

Atas ialah kandungan terperinci javascript冒泡事件的用法示例(代码). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Arahan sembang dan cara menggunakannya
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Apakah cara biasa untuk mengelakkan kejadian menggelegak? Apakah cara biasa untuk mengelakkan kejadian menggelegak? Feb 19, 2024 pm 10:25 PM

Apakah arahan yang biasa digunakan untuk mengelakkan peristiwa menggelegak? Dalam pembangunan web, kami sering menghadapi situasi di mana kami perlu mengendalikan acara menggelegak. Apabila peristiwa dicetuskan pada elemen, seperti peristiwa klik, elemen induknya juga akan mencetuskan peristiwa yang sama. Tingkah laku penyampaian acara ini dipanggil acara menggelegak. Kadangkala, kami ingin menghalang acara daripada menggelegak, supaya acara itu hanya menyala pada elemen semasa dan menghalangnya daripada dihantar kepada elemen unggul. Untuk mencapai matlamat ini, kita boleh menggunakan beberapa arahan biasa yang menghalang peristiwa menggelegak. acara.stopPropa

Tiada sokongan untuk acara menggelegak: had dan skop Tiada sokongan untuk acara menggelegak: had dan skop Jan 13, 2024 pm 12:51 PM

Acara menggelegak (BubblingEvent) merujuk kepada kaedah penghantaran acara yang dicetuskan langkah demi langkah daripada elemen anak kepada elemen induk dalam pepohon DOM. Dalam kebanyakan kes, peristiwa menggelegak adalah sangat fleksibel dan berskala, tetapi terdapat beberapa kes khas di mana peristiwa tidak menyokong menggelegak. 1. Peristiwa yang manakah tidak menyokong menggelegak? Walaupun kebanyakan acara menyokong menggelegak, terdapat beberapa acara yang tidak menyokong menggelegak. Berikut ialah beberapa peristiwa biasa yang tidak menyokong menggelegak: fokus dan kaburkan acara memuatkan dan melepaskan

Apakah peristiwa yang tidak boleh timbul? Apakah peristiwa yang tidak boleh timbul? Nov 20, 2023 pm 03:00 PM

Peristiwa yang tidak boleh gelembung ialah: 1. acara fokus; 3. acara tatal; ; 9. Acara DOMContentLoaded;

Apakah maksud peristiwa menggelegak Apakah maksud peristiwa menggelegak Feb 19, 2024 am 11:53 AM

Peristiwa menggelegak bermakna bahawa dalam pembangunan web, apabila peristiwa dicetuskan pada elemen, peristiwa itu akan merebak ke elemen atas sehingga mencapai elemen akar dokumen. Kaedah penyebaran ini adalah seperti gelembung yang beransur-ansur naik dari bawah, jadi ia dipanggil peristiwa menggelegak. Dalam perkembangan sebenar, mengetahui dan memahami cara acara menggelegak berfungsi adalah sangat penting untuk mengendalikan acara dengan betul. Berikut akan memperkenalkan konsep dan penggunaan peristiwa menggelegak secara terperinci melalui contoh kod tertentu. Mula-mula, kami mencipta halaman HTML ringkas dengan elemen induk dan tiga anak

Mengapakah peristiwa gagal timbul? Mengapakah peristiwa gagal timbul? Jan 13, 2024 am 08:50 AM

Mengapakah peristiwa tidak timbul dalam beberapa kes? Peristiwa menggelegak bermakna apabila peristiwa pada elemen dicetuskan, peristiwa itu akan merambat ke atas bermula dari elemen paling dalam sehingga ia dihantar ke elemen paling luar. Tetapi dalam beberapa kes, acara tidak boleh menggelembung, iaitu, acara hanya akan diproses pada elemen yang dicetuskan dan tidak akan dihantar kepada elemen lain. Artikel ini akan memperkenalkan beberapa situasi biasa, membincangkan sebab peristiwa gagal menggelegak dan memberikan contoh kod khusus. Gunakan corak tangkapan acara: Tangkapan acara ialah satu lagi cara penyampaian acara, berbanding acara menggelegak.

Apakah arahan untuk mengelakkan kejadian menggelegak? Apakah arahan untuk mengelakkan kejadian menggelegak? Nov 21, 2023 pm 04:14 PM

Arahan untuk mengelakkan peristiwa menggelegak termasuk stopPropagation(), cancelBubble attribute, event.stopPropagation(), event.cancelBubble attribute, event.stopImmediatePropagation(), dsb. Pengenalan terperinci: 1. stopPropagation() ialah salah satu arahan yang paling biasa digunakan, digunakan untuk menghentikan penyebaran peristiwa. Apabila peristiwa dicetuskan, memanggil kaedah ini boleh menghalang acara daripada berterusan, dsb.

Kuasai mekanisme menggelegak acara biasa dalam JavaScript Kuasai mekanisme menggelegak acara biasa dalam JavaScript Feb 19, 2024 pm 04:43 PM

Peristiwa menggelegak biasa dalam JavaScript: Untuk menguasai ciri menggelegak acara biasa, contoh kod khusus diperlukan Pengenalan: Dalam JavaScript, acara menggelegak bermakna peristiwa itu akan merambat dari elemen dengan tahap bersarang paling dalam ke elemen luar sehingga ia merambat ke. Unsur induk paling luar. Memahami dan menguasai acara menggelegak biasa boleh membantu kami mengendalikan interaksi pengguna dan pengendalian acara dengan lebih baik. Artikel ini akan memperkenalkan beberapa peristiwa menggelegak biasa dan memberikan contoh kod khusus untuk membantu pembaca memahami dengan lebih baik. 1. Klik acara (klik

Kuasai kepentingan acara menggelegak dan tingkatkan kemahiran sosial peribadi Kuasai kepentingan acara menggelegak dan tingkatkan kemahiran sosial peribadi Jan 13, 2024 pm 02:22 PM

Untuk memahami peranan acara menggelegak dan meningkatkan kemahiran sosial peribadi, contoh kod khusus diperlukan Pengenalan: Dalam era media sosial yang maju hari ini, kemahiran sosial peribadi menjadi semakin penting. Peningkatan kemahiran sosial bukan sahaja untuk berkawan, tetapi juga untuk berkomunikasi dengan orang lain, menyesuaikan diri dengan masyarakat dan mencapai perkembangan peribadi. Walau bagaimanapun, ramai orang sering berasa terharu apabila berhadapan dengan orang yang tidak dikenali atau dalam situasi awam, dan tidak tahu bagaimana untuk menjalinkan hubungan dengan orang ramai. Artikel ini akan memperkenalkan peranan acara menggelegak secara terperinci dan menyediakan contoh kod khusus untuk membantu pembaca mempelajari dan menguasai kemahiran sosial serta meningkatkan kemahiran sosial peribadi.

See all articles