Web Front-end
JS Tutorial
A small example explains how to prevent Jquery events from bubbling_jquery
A small example explains how to prevent Jquery events from bubbling_jquery
What is JS event bubbling?
Trigger a certain type of event (such as an onclick event) on an object. If the object defines a handler for this event, then this event will call this handler. If this event handler is not defined or the event returns true, then this event will propagate to the parent object of this object, from inside to outside, until it is processed (all similar events of the parent object will be activated), or it reaches the top level of the object hierarchy, that is, the document object (Some browsers are window).
How to stop Jquery events from bubbling?
Explain with a small example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Porschev---Jquery 事件冒泡</title>
<script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="divOne" onclick="alert('我是最外层');">
<div id="divTwo" onclick="alert('我是中间层！')">
<a id="hr_three" href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" mce_href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" onclick="alert('我是最里层！')">点击我</a>
</div>
</div>
</form>
</body>
</html>
For example, the page above,
Divided into three layers: divOne is the outer layer, divTwo is the middle layer, and hr_three is the innermost layer;
They all have their own click events, and the innermost a tag also has href attributes.
Run the page, click "Click Me", and it will pop up in sequence: I am the innermost layer---->I am the middle layer---->I am the outermost layer
---->Then link to Baidu.
This is event bubbling. Originally, I only clicked on the label with the ID hr_three, but three alert operations were executed.
Event bubbling process (represented by tag ID): hr_three----> divTwo----> divOne. Bubbling from the innermost layer to the outermost layer.
How to stop it?
1.event.stopPropagation();
<script type="text/javascript">
$(function() {
$("#hr_three").click(function(event) {
event.stopPropagation();
});
});
<script>Click "Click me" again, it will pop up: I am the innermost layer, and then link to Baidu
2.return false;
If the following code is added to the header
<script type="text/javascript">
$(function() {
$("#hr_three").click(function(event) {
return false;
});
});
<script>
Click "Click me" again, and a pop-up will appear: I am the innermost layer, but the link to the Baidu page will not be executed
It can be seen from this:
1.event.stopPropagation();
During event processing, event bubbling is prevented, but the default behavior is not blocked (it executes the jump of the hyperlink)
2.return false;
During event processing, event bubbling is prevented and default behavior is prevented (for example, it did not execute hyperlink jump just now)
There is another one related to bubbling:
3.event.preventDefault();
If you put it in the click event of the header A tag, click "Click me".
You will find that it pops up in sequence: I am the innermost layer---->I am the middle layer---->I am the outermost layer, but in the end it does not jump to Baidu
Its function is: during event processing, it does not block event bubbling, but blocks the default behavior (it only executes all pop-up boxes, but does not execute hyperlink jumps)
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
AI Hentai Generator
Generate AI Hentai for free.
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
1377
52
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
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.
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
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)
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:
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
What is event bubbling? In-depth analysis of event bubbling mechanism
Feb 20, 2024 pm 05:27 PM
What is event bubbling? In-depth analysis of the event bubbling mechanism Event bubbling is an important concept in web development, which defines the way events are delivered on the page. When an event on an element is triggered, the event will be transmitted starting from the innermost element and passed outwards until it is passed to the outermost element. This delivery method is like bubbles bubbling in water, so it is called event bubbling. In this article, we will analyze the event bubbling mechanism in depth. The principle of event bubbling can be understood through a simple example. Suppose we have an H
