Home > Developer > Web Develop
Event bubbles. Blocking event bubbling | blocking the default behavior of elements and bubbling events
<. 1>
If multiple elements overlap in the page and these elements are bound to the same event
Current bubble problem.
The trigger sequence is from small to large.
This is the so-called bubble phenomenon, layer by layer.
<Html><Script type = "text/javascript"> $ (function () {// ------------------------ [1] stopPropagation () disables event bubbling $ ("div "). click (function (e) {// e. stopPropagation (); // disable the click Event bubble bound to the div element. Of course, we can also disable the bubbling of other events, such as mouseOver .. and so on}) $ ("# "). click (function () {alert ("I am A") ;}) $ ("# B "). click (function () {alert ("I am B") ;}) $ ("# c "). click (function (e) {// e. stopPropagation (); // disable the click Event bubble alert ("I am c") ;}) // --------------------- [2] preventDefault () bound to the div element of id = C () cancels the default behavior of an element. // elements in a webpage have their own default behavior during operations. For example, right-click the input area of the text box, and the system menu will pop up. clicking the hyperlink will jump to the specified page, and clicking the submit button will submit data. This is the default behavior of elements. $ ("# A_linkA "). click (function (e) {e. preventDefault (); // prevents the default behavior of this hyperlink with the id of a_link. When you click this hyperlink, it will not jump to the specified webpage. }) // --------------------------------------- Prohibit form submission $ ("# sub "). click (function (e) {e. preventDefault (); // disable form submission; Disable default submission of submit. We can see that data is no longer submitted when you click "Submit. }) // If you do not want to block the default click Event of the submit button (the default click Event of the submit button is the form submission event), you only want to block this submission event, we can perform $ ("form") in form "). submit (function (e) {e. preventDefault (); // disable form submission. Recommended usage}); // ------------------------------------- both stop default behavior and disable Bubble Behavior $ ("# a_linkB "). click (function (e) {e. stopPropagation (); // disable id = a_linkB. The click Event of the <a> label bubbles e. preventDefault (); // disable the default behavior of the click Event of the <a> label with id = a_linkB (that is, clicking a hyperlink does not have the jump function )//. If the two methods need to be enabled at the same time, there is also a short solution, that is, directly return false. // Return false ;}); $ ("# a_linkB "). click (function (e) {alert (e. isDefaultPrevented (); // determines whether the preventDefault () method is called. That is, to determine whether the default action of the click event of # a_linkB element is blocked, true alert (e. isPropagationStopped () is printed; // to determine whether the stopPropagation () method is called. That is, determine whether the click Event of the # a_linkB element is blocked and bubble is printed out: true}) // ------------------------ [3] stopImmediatePropagation, and cancel the subsequent event processing function $ ("# d "). click (function () {alert ("I am D"); // test bubble}) $ ("# e "). click (function (e) {e. stopImmediatePropagation (); // The following section $ ("# e") When I use this code "). click (function () {alert ("I am still E")}) and the code will not be executed again. And the code $ ("# d"). click (function () {alert ("I am D") ;}) will no longer be executed. Because stopImmediatePropagation () is used to prevent event bubbles, [so it blocks $ ("# d "). click (function () {alert ("I am D") ;}) to execute this code ]. And stop the subsequent processing function of the event [and the following section $ ("# e "). click (function () {alert ("I or E")}) code is the subsequent event of the current event. So it is blocked again.] alert ("I am E"); alert (e. isImmediatePropagationStopped (); // determines whether the stopImmediatePropagation () method is called}) $ ("# e "). click (function (e) {// if the above function uses the stopImmediatePropagation (); method, I will not be executed. (Note: we are all # click events of the Eelement. If not, they do not work.) alert ("I or E")}) </script>
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
