What is a bubbling event?
Child elements are wrapped in a parent element, while giving the child when the parent element binding element binding event event, if you click a child element, the parent element event will be starting sequence is a child → parent element.
Why settle for a bubbling event?
When the child elements, and parent elements simultaneously bind click event, when you click a child element, you do not want the event of the parent element is also activated.
How to solve a bubbling event?
1.event.stopPropagation();
$(function() {
$(".three").click(function(event) {
event.stopPropagation();
});
});
Definition and Usage
No longer distribute event.
Termination event in the capture of the communication process, the target processing or the further spread of blistering stage. After calling this method, the handler handles the event on that node will be called, the event is no longer dispatched to other nodes.
2.return false;
$(function() { $("#three").click(function(event) { return false; }); });
3.event.preventDefault();
$(function() { $(".three").click(function(event) { event.preventDefault(); }); });Definition and Usage
Cancel the default action of the event. This method tells the Web browser not to perform a default action associated with the event (if there is such an action). For example, if the type attribute is "submit", at any stage of event propagation can call any event handler, by calling this method, you can block submit the form. Note that if the cancelable property of the Event object is fasle, then there is no default action, or can not prevent the default action. This method either case, the calls are no effect.