Usage example of javascript bubbling event (code)-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Usage example of javascript bubbling event (code)

不言

Oct 27, 2018 pm 03:20 PM

bubbling event

The content of this article is about the usage examples (code) of JavaScript bubbling events. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Note: When the lower element and the upper element support the same event, when the upper event is triggered, the lower event is also triggered. This is called event bubbling.

Cancel event bubbling: 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>

Copy after login

Clicking the upper div will also trigger the lower event. To cancel bubbling, just: ev.cancelBubble = true

Usage example of javascript bubbling event (code)

The above is the detailed content of Usage example of javascript bubbling event (code). For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

3 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

3 weeks ago By DDD

Roblox: Dead Rails - How To Complete Every Challenge

4 weeks ago By DDD

Atomfall guide: item locations, quest guides, and tips

4 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7670

CakePHP Tutorial

1393

C# Tutorial

1206

What is the format of the account name of steam

win11 activation key permanent

Related knowledge

What are the common ways to prevent bubbling events? Feb 19, 2024 pm 10:25 PM

What are the commonly used commands to prevent bubbling events? In web development, we often encounter situations where we need to handle event bubbling. When an event is triggered on an element, such as a click event, its parent element will also trigger the same event. This behavior of event delivery is called event bubbling. Sometimes, we want to prevent an event from bubbling up, so that the event only fires on the current element, and prevents it from being passed to superior elements. To achieve this, we can use some common directives that prevent bubbling events. event.stopPropa

What events cannot bubble up? Nov 20, 2023 pm 03:00 PM

The events that cannot bubble are: 1. focus event; 2. blur event; 3. scroll event; 4. mouseenter and mouseleave events; 5. mouseover and mouseout events; 6. mousemove event; 7. keypress event; 8. beforeunload event ; 9. DOMContentLoaded event; 10. cut, copy and paste events, etc.

No support for bubbling events: limitations and scope Jan 13, 2024 pm 12:51 PM

Bubbling event (BubblingEvent) refers to an event delivery method that is triggered step by step from child elements to parent elements in the DOM tree. In most cases, bubbling events are very flexible and scalable, but there are some special cases where events do not support bubbling. 1. Which events do not support bubbling? Although most events support bubbling, there are some events that do not support bubbling. The following are some common events that do not support bubbling: focus and blur events load and unloa

What is the meaning of bubbling events Feb 19, 2024 am 11:53 AM

Bubbling events mean that in web development, when an event is triggered on an element, the event will propagate to upper elements until it reaches the document root element. This propagation method is like a bubble gradually rising from the bottom, so it is called a bubbling event. In actual development, knowing and understanding how bubbling events work is very important to handle events correctly. The following will introduce the concept and usage of bubbling events in detail through specific code examples. First, we create a simple HTML page with a parent element and three children

What are the instructions to prevent bubbling events? Nov 21, 2023 pm 04:14 PM

Instructions to prevent bubbling events include stopPropagation(), cancelBubble attribute, event.stopPropagation(), event.cancelBubble attribute, event.stopImmediatePropagation(), etc. Detailed introduction: 1. stopPropagation() is one of the most commonly used instructions, used to stop the propagation of events. When an event is triggered, calling this method can prevent the event from continuing, etc.

Master the common event bubbling mechanism in JavaScript Feb 19, 2024 pm 04:43 PM

Common bubbling events in JavaScript: To master the bubbling characteristics of common events, specific code examples are required. Introduction: In JavaScript, event bubbling means that the event will start from the element with the deepest nesting level and propagate to the outer element until it propagates to The outermost parent element. Understanding and mastering common bubbling events can help us better handle user interaction and event handling. This article will introduce some common bubbling events and provide specific code examples to help readers better understand. 1. Click event (click

Why do events fail to bubble up? Jan 13, 2024 am 08:50 AM

Why don't events bubble up in some cases? Event bubbling means that when an event on an element is triggered, the event will propagate upward from the innermost element until it is passed to the outermost element. But in some cases, the event cannot bubble, that is, the event will only be processed on the triggered element and will not be passed to other elements. This article will introduce some common situations, discuss why events fail to bubble, and provide specific code examples. Use the event capture pattern: Event capture is another way of event delivery, as opposed to event bubbling.

How to effectively prevent bubbling events? Command analysis! Feb 23, 2024 am 11:33 AM

How to effectively prevent bubbling events? Command analysis! A bubbling event means that an object triggers an event during program execution, and the event will bubble up and pass to the parent element of the object until it is processed or reaches the top level of the document. Bubbling events may cause unnecessary code execution or page operations, affecting user experience. Therefore, we need to take some measures to effectively prevent the spread of bubbling events. Here are some instructions that can be used to stop the propagation of bubbling events: Use event.stopPropagation

See all articles