In JavaScript Dom operation will definitely encounter JS bubbling event, most commonly is the div pop-up window event solutionWhen clicking on the gray part of the pop-up window disappears, clicking on the Black section has no effect.The following section of code to analyze the bubbling
The bubbling event is a click on the child node, which triggers the parent node, the ancestor node's click event.Here is the HTML code section:The corresponding jquery code is as follows:When you click Span, the div and body click events are triggered. Clicking on a div triggers the body's Click event.How do you prevent this bubbling
This article mainly introduces javascript event bubbling and javascript implementation code to prevent event bubbling. If you are interested, you can refer to the event as one of the core content in javascript, an important concept is inevitably involved in the application o
As each element is triggered in the document, it will bubbleIf there are alert events on each layer, then the inner div is triggered, the outer layer, the outermost layer.To prevent interference between events, you need to block event bubbling.General use of e.stoppropagation ();IE8 and below do not support, need to use e.cancelbubble=false;Another e is the global object used to get the window. E can use any other letter or Word instead, such as a,b,c
div id = "Content" > outer div element span > inner span element span > outer div element div > div id = "MSG" > div > $(function(){ //binding The Click event for a SPAN element$ (' span '). BIND ("click",function(event) {varTXT = $ (' #msg '). HTML () + "; $(' #msg '). html (TXT); Event.stoppropagation (); //Block Event
What is a bubbling event? Simply put, the event is like a bubble in the water, triggering the current object and then triggering its parent element, then the parent element ...egClick button, pop-up inner, middle, out.Which element is terminated?From the current element step up, some browsers end in document, there are window.How do I block
1, when the user browsing the page , the browser will explain or compile the page code-this process is essentially through the event to drive, that is, when the page is loaded, execute a Load event, in this event to implement the browser to compile the page code process. The event is triggered into two phases, one is c
Today, a problem is encountered, the same element in the component is bound to multiple identical events, a, a, a callback function in the A event returns a Boolean type value, if True then continue, if False then return directly;So let's look at a few ways to block events in an event object:1. Event.preventdefault (); --Block The default event for an element.Not
JQuery provides two methods to prevent event bubbles. The following describes the two methods and specific application cases.
Method 1: event. stopPropagation ();
$("#div1").mousedown(function(event){event.stopPropagation();});
Method 2: return false;
$("#div1").mousedown(function(event){return false;});
The two method
There are very important features in JavaScript events-event bubbling: Gossip Less, let's illustrate everything by observing the following code: If you click on runs The Click event is triggered whenever we click formdiv If we click on P, the browser will execute alert (' P ') in turn; Alert (' div ');Alert (' form '). This means that when an
Compatible with Firefox, Google and other browsers functionStopevent (event) {//Block Bubbling Events //Cancel Event Bubbling vare=arguments.callee.caller.arguments[0]| | Event//If this sentence is omitted, the following e will be changed to
Stop event bubbling and "block browser default behavior" are frequently used in front-end development work due to browser compatibility issues.
1. Block browser default behavior [Java] View plain copy Functionstopdefault (e) { //If an event object is provided, this is a non-ie browser if (ee.preventdefault) { //block default browser actions (web) E.pr
In the front-end development work, because of browser compatibility issues, we often use "stop event bubbling" and "block browser default behavior."
1. Stop event bubbling
JavaScript code
If an event object is provided, this is a non-ie browser if
(e e.stoppropagation)
The bubbling event and event monitoring in JSBubbling EventJS "Bubble Event" is not practical use of fancy tricks, it is a sequence of JS event execution mechanism, "bubbling algorithm" in the programming is a classic problem,
Let's take a look at a JavaScript event bubbling example. There is a button in the div element, and they are all bound to a click event, which is a precondition for event bubbling. When you click on the button, there will be two warning boxes, one for the button's click
1.E.preventdefault () block event default behaviorE.preventdefault ();----according to English meaning, such as: $ ("#xx"). Click (function (e) {Alert ("xxx");E.preventdefault ();}); ----------------------------------this time will pop up "xxx", will not jump to href==2.e.stoppropagation () block event bubblingEvent bubbling is all from the inside out.$ (". PP").
Transferred from: http://wyqbailey.diandian.com/post/2012-07-12/40030551971return FalseIn jquery, we often use return false to block the browser's default behavior, what does "return false" actually do?When you call "return false" every time, it actually does 3 things:
Event.preventdefault ();
Event.stoppropagation ();
Stops the callback function execution and returns immediately.
Yes, you are right, return false does so many things. It's been used repeatedly because it loo
Here is the HTML code section:
Copy Code code as follows:
Outer DIV Element
Outer DIV Element
The corresponding jquery code is as follows:
Copy Code code as follows:
When you click Span, it triggers the div and body click events. Clicking on the div triggers the body's Click event.
How do you prevent this bubbling even
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.