JS events Bubble and click Other areas to hide pop-up layers

Source: Internet
Author: User

First, preface

When writing a page, we often use the pop-up layer. For the pop-up layer, the original meaning is to increase the user's interaction, enhance the user's goodwill degree. If the pop-up layer does not have a better experience, then how to talk through interaction to enhance the goodwill ...

First, several pop-up layers are noted:

    • The interface of the pop-up layer needs to be unified, the inconsistent pop-up layer does not add aesthetics, and the page layout becomes more cluttered.
    • The design of the pop-up layer must look good, the button to conform to the main color of the project;
    • The width of the pop-up layer is fixed screen ratio, set max-width, height according to the content of adaptive;
    • Click Other areas to hide the pop-up layer ...
Second, the text

Today, mainly say click on other areas to hide the pop-up layer. The author was tortured for a long time, almost every time to achieve this effect is to check the data, try again and again to achieve the desired effect. Such trouble is due to the insufficient understanding of event bubbling to be handled incorrectly.

What is event bubbling? Why use it?

Event Bubbling: the node (document) that receives the most specific element (the current node) and then propagates up to the least-specific element;

When implementing the Click to hide the pop-up layer, you need to bind a fixed-point event to the document, and event bubbling will cause the event to be triggered when the other node is clicked, causing an event conflict, causing the display to show a pop-up layer and hiding the pop-up layer when it is not hidden.

<styletype= "Text/css">. Layer-container{position:Absolute;Top:0; Left:0;width:100%;Height:100%;Background-color:rgba (0, 0, 0, 0.5);Display:Flex;justify-content; center; Align-items:Center;Display:None;    }. Layer-main{width:75%;padding:20px;Max-width:400px;    }</style><Body><Button>Show pop-up layer</Button><Divclass= "Layer-container">    <Divclass= "Layer-main">         <Divclass= "Layer-header"></Div>         <Divclass= "Layer-content"></Div>         <Divclass= "Layer-footer">             <Divclass= "Layer-button">Confirm</Div>        </Div>    </Div></Div><Script>    //Click the button to display the popup layer    $("Button"). Bind ("Click", function(){        $(". Layer-container"). CSS ("Display", "Flex"); Event.stoppropagation ();//========== block bubbling 1    })    //Click another area to hide the popup layer$ (document). Bind ("Click", function(){        $(". Layer-container"). CSS ("Display", "None"); })    //Click the Confirm button in the pop-up layer    $(". Layer-button"). Bind ("Click", function() {Console.log ("Click the Confirm button")    })    //bind a point-click event to a popup layer to prevent bubbling    $(". Layer-main"). Bind ("Click", function() {event.stoppropagation ();//========== block bubbling 2    })</Script></Body>


    • $ (document) to bind a fixed-point event to the entire file, click to hide the pop-up layer container;
    • $ ("button") to button to bind the fixed-point event, click to display the pop-up layer container;
      This must be added event.stoppropagation () to prevent bubbling, or the event that first executes the button shows the popup layer container, and then bubbles up to execute the document event to hide the pop-up layer container, resulting in no effect on the final click;
    • $ (". Layer-main") gives the popup layer main a fixed-point click event, clicking on it or bubbling to it, which prevents the bubbling to document;
      Click here and block bubble must add, otherwise click on the pop-up layer main or the other nodes inside, will bubble to document, thus hiding the pop-up layer container, causing the event disorder.

In fact, the target of the event (Event.target) can also be used to identify the node currently clicked, so that the next operation, such as the specific operation of the specified node

==>> Hide Div Except for the specified area by tapping any area

$ (' body '). Click (function(e) {vartarget =$ (e.target); //If there are child elements under #layer or #btn, you can use    //!target.is (' #btn * ') &&!target.is (' #layer * ')    if(!target.is (' #btn ') &&!target.is (' #layer '))) {       if($ (' #layer '). Is (': Visible ')) ) {              $(' #layer '). Hide (); }    }});$(' Body '). Click (function(e) {if(E.target.id! = ' btn ' && e.target.id! = ' overlay ')      if($ (' #layer '). Is (': Visible ')) ) {         $(' #layer '). Hide (); }})

Third, conclusion



JS events Bubble and click Other areas to hide pop-up layers

Contact Us

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.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.