Home > Developer > Web Develop
1. Event bubbling:
When you click inside the <span> element, it triggers the click events of itself and the outer <div> and <body>, which is caused by event bubbling. Events propagate up in sequence as the DOM hierarchy progresses.
<%@ page language= "java" import= "java.util.*" pageencoding= "utf-8"%><%string path = Request.getcontextpath () ; String basepath = request.getscheme () + "://" +request.getservername () + ":" +request.getserverport () +path+ "/";%> <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >Event bubbling can cause unintended effects, and sometimes it is necessary to block the bubbling behavior of events, using the Stoppropagation () method.
Modify the Click event function of the <span> element:
Bind the Click event $ ("span") for the <span> element. Click (function (event) {//) Add an Event object parameter $ ("#msg") to the method. HTML ($ ("#msg"). P> inner span element is clicked </p> "); Event.stoppropagation ();//block <span> Click event Bubbling});2. Block default behavior
Sometimes the user's actions do not meet certain conditions, it is necessary to block the default behavior of some elements, such as linked jumps and form submissions, etc., JQuery provides the Preventdefault () method to implement.
Block the form submission when the user does not fill in the user name:<%@ page language= "java" import= "java.util.*" pageencoding= "utf-8"% ><%string path = Request.getcontextpath (); String basepath = request.getscheme () + "://" +request.getservername () + ":" +request.getserverport () +path+ "/";%> <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >3. If you want to block both event bubbling and blocking element default behavior, you can return false in the event function instead of calling the Stoppropagation () and Preventdefault () methods.
$ (": Submit"). Click (function) {//Add an Event object parameter for the method///When the user name is not entered, prompt and block commit if ($ (": Text"). val () = = "") {$ ("#msg"). Text (" User name cannot be empty "); return false;//block the default behavior of the Submit button (submit form) and event Bubbling}});
$ ("span"). Click (Function (event) {//) Add an Event object parameter $ ("#msg") to the method. HTML ($ ("#msg"). HTML () + <p> inner SPAN element click </p> "); return false;//block <span> 's Click event bubbling and default behavior (this element has no default behavior)});This article refers to the http://blog.csdn.net/aimartt/article/details/7860160
Event bubbling and blocking default behavior in JQuery
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
