Web Front-end
JS Tutorial
JavaScript event bubbling application example analysis_javascript skills
JavaScript event bubbling application example analysis_javascript skills
However, in some large-scale WEB interactive projects today, such as large-scale WebGame projects, the impact of JavaScript event bubbling is worthy of attention. This article uses a simple example to explain JavaScript event bubbling and usage precautions.
If you have no impression of JavaScript event bubbling, you might as well read a blog I wrote before, "Introduction and Application of JavaScript Event Bubbles". This article is practical and will not elaborate too much on the basic knowledge of JavaScript event bubbling.
Before starting the article, let’s take a look at the following requirement: The following HTML assumes that it describes the outer frame of a WebGame project package bar (people who have played online games should know what a package bar or an inventory bar is) , drag the package title bar to drag the package to any position on the page, and click the "×" close button on the right side of the title bar to close the display of the package bar. By observing the HTML structure, you can find that the close button is actually an A link, and it exists as a child element of the title bar H5. To drag an element, we would think of registering the mousedown event to the dragging handle element, and clicking or "clicking" the close button to close the package. Based on this requirement, we quickly got the following code. 
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute
In the above example, You find that when you click the close button, the mousedown event of the title bar is also triggered. Obviously this is what you expected, because you know that this is the JavaScript event bubbling at work. In fact, the effect you really want is not to execute the mousedown event registered in the title H5 when you click the close button, so you thought of preventing the event from bubbling up, and then modified the code to the following: The code is as follows:
As a result, you find that when you click the close button, the mousedown event registered by the title H5 is still executed. What is going on? In fact, if you are careful, you may find that the events registered by the H5 title and the A link are not the same. In the above code, we call the blocking event method in the click event registered by the A link. This just means that the "similar event registered by its parent element" Event" will not be executed, which means that if the H5 title also registers a click event, the click event will not be executed, and the mousedown here will continue to be executed. The mousedown execution here does not occur because you click on the title bar, but because the mousedown event is generated when you click. Then, due to the existence of the JavaScript event bubbling mechanism, the event is broadcast to the parent and is mousedowned by the H5 title. Register method capture. For understanding of this point, you can refer to my other blog "When onmousedown, onmouseup, and onclick are applied to the same label node Element at the same time". Now, through analysis, you should know how to do it. Make a small change to the above code. Just change the click event of the A link to the same mousedown event as the H5 title, and the effect you want will be achieved.
Related topics:
Now let’s talk about how to easily prevent event bubbling when developing with jQuery. As an excellent scripting framework, jQuery is naturally outstanding in event encapsulation and browser compatibility. If you want to know more, you can also read my other blog "Using jQuery's $.event.fix function to unify browser event processing".
There are two ways to prevent events from bubbling using jQuery:
1. Use jQuery to make compatible event objects and directly use event.preventDefault(). The example code is as follows:
2. Function bound in jQuery Return false in , that is, return false. Note: It is useless to return false from methods that are not bound using jQuery. The code is as follows:
One final note Now, use the second method to prevent the event from bubbling, and also prevent the browser's default behavior. In the handle method of the source code of jQuery event processing (jQuery JavaScript Library v1.3.2 non-compressed code line 2700) we can see For the following processing, event.preventDefault() is used to prevent the browser's default behavior.
handle: function(event)
{
//other code......
if (ret === false)
{
event.preventDefault();
event.stopPropagation();
}
//other code......
}
Author: WebFlash
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
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
Understand the event bubbling mechanism: Why does a click on a child element affect the event of the parent element?
Jan 13, 2024 pm 02:55 PM
Understanding event bubbling: Why does a click on a child element trigger an event on the parent element? Event bubbling means that in a nested element structure, when a child element triggers an event, the event will be passed to the parent element layer by layer like bubbling, until the outermost parent element. This mechanism allows events on child elements to be propagated throughout the element tree and trigger all related elements in turn. To better understand event bubbling, let's look at a specific example code. HTML code: <divid="parent&q
Reasons and solutions for jQuery .val() failure
Feb 20, 2024 am 09:06 AM
Title: Reasons and solutions for the failure of jQuery.val() In front-end development, jQuery is often used to operate DOM elements. The .val() method is widely used to obtain and set the value of form elements. However, sometimes we encounter situations where the .val() method fails, resulting in the inability to correctly obtain or set the value of the form element. This article will explore the causes of .val() failure, provide corresponding solutions, and attach specific code examples. 1.Cause analysis.val() method
Why does event bubbling trigger twice?
Feb 22, 2024 am 09:06 AM
Why does event bubbling trigger twice? Event bubbling (Event Bubbling) means that in the DOM, when an element triggers an event (such as a click event), the event will bubble up from the element to the parent element until it bubbles to the top-level document object. . Event bubbling is part of the DOM event model, which allows developers to bind event listeners to parent elements, so that when child elements trigger events, the events can be captured and processed through the bubbling mechanism. However, sometimes developers encounter events that bubble up and trigger twice.
Why can't click events in js be executed repeatedly?
May 07, 2024 pm 06:36 PM
Click events in JavaScript cannot be executed repeatedly because of the event bubbling mechanism. To solve this problem, you can take the following measures: Use event capture: Specify an event listener to fire before the event bubbles up. Handing over events: Use event.stopPropagation() to stop event bubbling. Use a timer: trigger the event listener again after some time.
Which JS events don't bubble up?
Feb 19, 2024 pm 09:56 PM
What are the situations in JS events that will not bubble up? Event bubbling (Event Bubbling) means that after an event is triggered on an element, the event will be transmitted upward along the DOM tree starting from the innermost element to the outermost element. This method of transmission is called event bubbling. However, not all events can bubble up. There are some special cases where events will not bubble up. This article will introduce the situations in JavaScript where events will not bubble up. 1. Use stopPropagati
Why does the event bubbling mechanism trigger twice?
Feb 25, 2024 am 09:24 AM
Why does event bubbling happen twice in a row? Event bubbling is an important concept in web development. It means that when an event is triggered in a nested HTML element, the event will bubble up from the innermost element to the outermost element. This process can sometimes cause confusion. One common problem is that event bubbling occurs twice in a row. In order to better understand why event bubbling occurs twice in a row, let's first look at a code example:
What scenarios can event modifiers in vue be used for?
May 09, 2024 pm 02:33 PM
Vue.js event modifiers are used to add specific behaviors, including: preventing default behavior (.prevent) stopping event bubbling (.stop) one-time event (.once) capturing event (.capture) passive event listening (.passive) Adaptive modifier (.self)Key modifier (.key)
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
