Home > Developer > Web Develop
Event bubbling: prevents event bubbling e. stopPropagation (), stoppropagation
<1>
<Html xmlns = "http://www.w3.org/1999/xhtml">
Note:
1. An event bubble triggers the same event on the upper layer.
When you click two, the one-click event is triggered.When the single-Host tree is used, two is triggered at the same time, and then one is triggered.
2. In the click event, add e. preventDefault () before the event you want to process ();
Then the action is canceled (in general: it is equivalent to a return operation), and the statement after the execution is not executed.3. e. stopPropagation () does not trigger the upper-level click event as long as it is in the click event.
Zookeeper
How to Prevent the bubbling mechanism of javascript eventsThis. style. border = '1px solid white';} var all2 = document. getElementsByTagName ('div ') [1]. getElementsByTagName ('*'); for (var I = 0, n = all2.length; I <n; ++ I) {all2 [I]. onmouseover = function (e) {this. style. border = '1px solid red'; if (e) // stop event bubbling e. stopPropagation (); elsewindow. event. cancelBubble = true; log. value = 'cursor: '+ this. nodeName;}; all2 [I]. onmouseout = function (e) {this. style. border = '1px solid white ';}}} window. onload = init; //] </script
How to prevent javascript event bubbling1. cancelBubble (html dom Event object attribute): If the Event handle wants to prevent the Event from spreading to an inclusive object, it must be set to true.
2. stopPropagation (html dom Event object method): terminates further propagation of an Event in the capture, target processing, or blister phase of the propagation process. After this method is called, the handler for processing the event on the node will be called, and the event will not be assigned to other nodes.
3. preventDefault (html dom Event object method) notifies the browser not to perform the default action associated with the Event.
Example:
Function stopBubble (e)
{
If (e & e. stopPropagation)
E. stopPropagation ()
Else
Window. event. cancelBubble = true
}
Put this stopBubble (e) function in the function that you want to stop event bubbles to prevent event bubbles.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
